Flex Div 的高度不是 100%答案

【问题标题】：Height of Flex Div Not 100%Flex Div 的高度不是 100%
【发布时间】：2019-08-08 03:33:14
【问题描述】：

我有身体全高，但最小高度为 100% 的包含 div 没有填充。我希望蓝色填充它的主体容器并弯曲对齐内部 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>

【问题讨论】：

标签： html css flexbox height

【解决方案1】：

你可能想通过 Height Calculation By Browsers : Containing Blocks and Children。显然 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>

【讨论】：

对于我的特定用例，我保持最小高度不变，但将它们设为 vh 而不是百分位数，这正是我所需要的。

【解决方案2】：

您可以为 .main 类指定 100vh 的最小高度。

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

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

【讨论】：