CSS 当容器使用“height: 100vh”时，出现垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44645465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When using "height: 100vh" for the container, vertical scrollbar appears
提问by cookya
I want the content to take the full height of the browser window, but not beyond.
我希望内容占据浏览器窗口的整个高度，但不能超出。
When using 100vh as the container height, I can see the vertical scrollbar appearing.
当使用 100vh 作为容器高度时，我可以看到垂直滚动条出现。
.container {
height: 100vh;
border: 3px solid lightsteelblue;
border-radius: 10px;
}
What could be the issue?
可能是什么问题？
EDIT:more detailed code:
编辑：更详细的代码：
CSS
CSS
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
margin: 0px;
padding: 0px;
}
.page_content {
height: 85vh;
width: 95vw;
border: 3px solid lightsteelblue;
border-radius: 10px;
overflow-y: auto;
margin: 0 auto;
}
.footer {
height: 14vh;
width: 95vw;
margin: 0px auto;
padding: 0px;
}
HTML
HTML
<html>
<body>
<div class="container">
<div class="page_content">
...
</div>
<div class="footer">
...
</div>
</div>
</body>
</html>
回答by Mr.Pandya
By default bodyand htmlare assigned to marginor paddingto some pixels. Try using following code.
默认情况下，body和html分配给margin或分配padding给某些像素。尝试使用以下代码。
1vh = 1% of veiwport height 100vh = 100% of height.
1vh = 1% veiwport 高度 100vh = 100% 高度。
So never calculate height - 3px. like this
所以永远不要计算高度 - 3px。像这样
body,html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
回答by cookya
The issue is that you have a border with it, and like padding, you have to add it to your height.
问题是你有一个边框，就像填充一样，你必须将它添加到你的高度。
Either you use this :
要么你用这个：
.container {
height: calc(100vh - 3px);
}
Or this :
或这个 ：
.container {
height: 100vh;
border: 3px;
box-sizing: border-box;
}
回答by Deepu Cherian
use
body{
margin :0px;
}
and
.container {
height: 100vh;
border: 3px;
box-sizing: border-box;
}
回答by DDan
body {
margin: 0;
}
.container {
height: 100vh;
border: 3px solid lightsteelblue;
border-radius: 10px;
box-sizing: border-box;
}
This did the trick. See and test it here: https://jsfiddle.net/ddan/jsenLgre/
这成功了。在此处查看并测试：https: //jsfiddle.net/ddan/jsenLgre/
回答by jidu0106
Came across same scenario, some auto margins in browser causesthe vertical scroll bar to appear. Very simple workaround I came across is to use 99vh instead of 100vh
遇到同样的情况，浏览器中的一些自动边距会导致出现垂直滚动条。我遇到的非常简单的解决方法是使用 99vh 而不是 100vh
.container {
height: 99vh;
border: 3px;
box-sizing: border-box;
}
}
回答by Ashish Singh
There is a user agent stylesheet that gets added to any web document, it's nothing but default set of style that each browser applies to the documents being viewed, however these rules have the a very lower precedence order. Of course the author can over ride these rules, and they do very often.
有一个用户代理样式表可以添加到任何 Web 文档中，它只不过是每个浏览器应用于正在查看的文档的默认样式集，但是这些规则的优先顺序非常低。当然，作者可以超越这些规则，而且他们经常这样做。
As of today, google chrome, adds 8px margin to your document if not added or over written by the author.
截至今天，如果作者未添加或覆盖，谷歌浏览器会为您的文档添加 8px 边距。
So let's consider you added a div in your entire HTML document called .container in your case. You may try doing something like this.
因此，让我们考虑您在整个 HTML 文档中添加了一个名为 .container 的 div。你可以尝试做这样的事情。
body {
margin: 0;
height: 100vh;
}
.container {
height: 100%;
//if you want to add border to this container,
border: 1px solid cyan;
box-sizing: border-box;
}
Further if you have any other divs inside the container, they would take advantage of .container class 100vh value. You can assign 70% height to .page-content and 30% height to .footer div.
此外，如果容器内有任何其他 div，它们将利用 .container class 100vh 值。您可以为 .page-content 分配 70% 的高度，为 .footer div 分配 30% 的高度。
.page-content {
height: 70%
border: 1px solid aquablue;
box-sizing: border-box;
}
.footer {
height: 30%;
}
回答by Alex
u can remove the scroll bar by overflow-y:hidden; and u should use calc function to remove ur header height example height: 100vh;
你可以通过 overflow-y:hidden; 删除滚动条；并且您应该使用 calc 函数删除您的标题高度示例高度：100vh；
calc(100vh -20px) if ur header is 20px height. so u get the 100vh !
calc(100vh -20px) 如果你的标题是 20px 高度。所以你得到了 100vh！
