Question

我将min-height: 100vh;应用于Flexbox容器，当我使用justify-content: space-around;

时，我会得到一个垂直滚动条

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

＆＃13;

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

＆＃13;

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

＆＃13;

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似乎不够，需要flex-grow。我认为来自justify-content: space-around的额外空白区域增加了高度。对我的推理没有信心，但似乎有效......

Answer 2

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

基本上我们需要将min-height: 100vh移动到父元素，并将display: flex应用于它。 <{1}}不是必需的。

https://jsfiddle.net/gkatsanos/uxgaaccr/3/

flex-grow

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

即使内容小于视口

2 个答案: