我有这个非常简单的代码。按照我的理解，将 body 的高度设置为 100vh 应该适合可见屏幕内的所有内容，但是当我运行它时，页面显示的大小是可见屏幕的两倍多。我必须将 body 的高度设置为 40-50vh 以适应可见屏幕内的所有内容。我在 1366x768 屏幕上使用最新的 Chrome。我知道我在这里遗漏了一些非常简单的东西。预先感谢您的帮助。
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100vh;
max-height: 100vh;
}
textarea {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<textarea></textarea>
<textarea></textarea>
<button>POST</button>
</body>
</html>
最佳答案
所以发生的事情是正文仍然是视口(viewport)的大小，但文本区域设置为视口(viewport)的 100%，因为你有 2 个文本区域，它溢出正文容器为 200% body 。在我的代码片段中，我在正文中添加了一个边框，这样您就可以看到发生了什么
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100vh;
max-height: 100vh;
border:5px solid red;
}
textarea {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<textarea></textarea>
<textarea></textarea>
<button>POST</button>
</body>
</html>因此，将文本区域的高度更改为 48%，这样您仍然可以在其中放置发布按钮。
关于html - 将高度设置为 100vh 时，页面在垂直方向上显示为屏幕大小的两倍以上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54489298/