Question

我的身体全高，但是最小高度为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>

Answer 1

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

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

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

Answer 2

您可能要经历 Height Calculation By Browsers : Containing Blocks and Children。显然，height和min-height在CSS中不是同一个人。

将min-height和height的{{1}}更改为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元素，以为 flexbox 设置内在高度-参见以下演示：

main

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;
}

Flex Div的高度不是100％

2 个答案: