即使内容小于视口，min-height 100vh也会创建垂直滚动条

Question

我正在应用min-height: 100vh; 到一个flexbox容器，当我使用justify-content: space-around;时，我得到一个垂直滚动条justify-content: space-around;

我不想强制高度，但我不明白为什么滚动条在那里，因为内容的尺寸小于视口。

 * { 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> 

Answer 1

添加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/

不知道为什么，但height: 100% .wrapper上的height: 100%似乎不够，它需要flex-grow 。 我认为还有一些额外的空白来自于justify-content: space-around增加了高度。 对我的推理没有信心，但似乎有效......

Answer 2

基于@Jazcash上面的答案，它可以进一步简化。

基本上我们需要将min-height: 100vh到父元素，并将display: flex应用于它。 不需要flex-grow 。

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>