Flex Div 的高度不是 100%

Posted 2023-03-06

【中文标题】Flex Div 的高度不是 100%

【英文标题】：Height of Flex Div Not 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>

【参考方案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