Html 即使内容小于视口，最小高度 100vh 也会创建垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42508504/
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
min-height 100vh creates vertical scrollbar even though content is smaller than viewport
提问by George Katsanos
I'm applying min-height: 100vh;to a flexbox container and I get a vertical scrollbar when I use justify-content: space-around;
我正在申请min-height: 100vh;一个 flexbox 容器，当我使用时，我得到了一个垂直滚动条justify-content: space-around;
I don't want to force the height, but I don't understand why the scrollbar is there since the contents have smaller dimensions than the viewport.
我不想强制高度，但我不明白为什么滚动条在那里，因为内容的尺寸比视口小。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet"/>
<div class="wrapper">
<div>
<h1>min-height: 100vh;</h1>
<h2>why is there a scrollbar here?</h2>
</div>
<div>
Be sure to expand window.
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
</div>
</div>采纳答案by Jazcash
Adding flex-grow seems to do the trick:
添加 flex-grow 似乎可以解决问题：
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-around;
}
https://jsfiddle.net/uxgaaccr/2/
https://jsfiddle.net/uxgaaccr/2/
Not sure why, but height: 100%on .wrapperdoesn't seem to suffice, it needs flex-growinstead. I think there was some extra white-space coming from justify-content: space-aroundthat was adding to the height. Not confident in my reasoning, but it seems to work...
不知道为什么，但height: 100%上.wrapper似乎并没有足够的，它需要flex-grow代替。我认为有一些额外的空白来自justify-content: space-around增加了高度。对我的推理没有信心，但它似乎有效......
回答by George Katsanos
Based on @Jazcash's answer above, it can be simplified even more.
根据上面@Jazcash 的回答，它可以进一步简化。
Essentially we need to move the min-height: 100vhto the parent element, and apply display: flexto it.
flex-growisn't required.
本质上，我们需要将 移动min-height: 100vh到父元素，并应用display: flex到它。
flex-grow不是必需的。
https://jsfiddle.net/gkatsanos/uxgaaccr/3/
https://jsfiddle.net/gkatsanos/uxgaaccr/3/
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: space-around;
}<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet"/>
<div class="wrapper">
<div>
<h1>min-height: 100vh;</h1>
<h2>why is there a scrollbar here?</h2>
</div>
<div>
Be sure to expand window.
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
</div>
</div>