Flex 的高度 Div 不是 100%

Question

我有主体的全高，但最小高度为 100% 的包含 div 没有填充。我想要蓝色填充它的主体容器并弯曲对齐内部 divs.

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>

Answer 1

您可能想通过。显然 height 和 min-height 在 CSS 中不是一回事。

将您的 body 和 html 的 min-height 更改为 height - 请参阅下面的演示：

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>

Answer 2

您可以给 .main class 最小高度 100vh。

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

演示：https://codepen.io/anon/pen/pYKzzM

Flex 的高度 Div 不是 100%

Height of Flex Div Not 100%

html

css

flexbox

height