min-height 100vh создает вертикальную полосу прокрутки, даже если содержимое меньше окна просмотра

Я использую min-height: 100vh; в контейнер flexbox, и я получаю вертикальную полосу прокрутки при использовании justify-content: space-around;

Я не хочу форсировать высоту, но я не понимаю, почему полоса прокрутки есть, так как содержимое имеет меньшие размеры, чем видовое окно.

css lang-css prettyprint-override">* {
  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;
}
html lang-html prettyprint-override"><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>
9
css flexbox html viewport-units

3 ответов

добавление 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% on .wrapper кажется, недостаточно, ему нужно . Я думаю, что было дополнительное белое пространство, исходящее от justify-content: space-around это добавляло высоты. Не уверен в своих рассуждениях, но, кажется, это работает...

6

основываясь на ответе @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>
2

Это сделал трюк для меня. По-видимому, некоторые автоматические поля могут заставить дисплей немного увеличиться.

html,
body {
  padding: 0;
  margin: 0;
}
0