Высота Flex Div Не 100% - PullRequest
Новая
       19

Высота Flex Div Не 100%

1 голос
/ 17 марта 2019

У меня полная высота тела, но содержащийся div с минимальной высотой 100% не заполняется.Я хотел бы, чтобы синий цвет заполнил его контейнер для тела и выровнял по внутренним элементам div.

https://codepen.io/steventnorris/pen/oVdKqY

html {
  min-height: 100%;
  width: 100%;
}

body {
  min-height: 100%;
  width: 100%;
  background-color: green;
}

.main {
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Ответы [ 2 ]

2 голосов
/ 17 марта 2019

Вы можете задать классу .main минимальную высоту 100vh. 

.main{
 display: flex;
 flex-direction: row;
 min-height: 100vh;
 justify-content: space-between;
 background-color: blue;
 }

Демо: https://codepen.io/anon/pen/pYKzzM

1 голос
/ 17 марта 2019

Вы можете пройти Расчет высоты по браузерам: содержащие блоки и дочерние элементы . Очевидно, что height и min-height - это не одно и то же в CSS.

Измените min-height на height для своих body и html - см. Демонстрацию ниже: 

html{
  height: 100%; /* changed to height */
  width: 100%;
}
body{
  height: 100%; /* changed to height */
  width: 100%;
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Вы также можете задать height: 100vh элементу main для установки собственной высоты для flexbox - см. Демонстрацию ниже: 

body{
  margin: 0;
  height: 100vh; /* full viewport height */
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>
...