[英]Height of Flex Div Not 100%
I have the body full height, but the containing div with a min-height of 100% does not fill. 我身体全高,但最小高度为100%的包含div不会填充。 I'd like the blue to fill it's body container and flex align the internal divs.
我希望蓝色填充它的身体容器并弯曲对齐内部div。
https://codepen.io/steventnorris/pen/oVdKqY 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>
You can give .main class a min-height of 100vh. 你可以给.main类一个100vh的最小高度。
.main{
display: flex;
flex-direction: row;
min-height: 100vh;
justify-content: space-between;
background-color: blue;
}
Demo: https://codepen.io/anon/pen/pYKzzM 演示: https : //codepen.io/anon/pen/pYKzzM
You may want to go through Height Calculation By Browsers : Containing Blocks and Children . 您可能希望通过浏览器进行高度计算:包含块和子项 。 Clearly
height
and min-height
are not the same thing in CSS. 显然,
height
和min-height
在CSS中不是一回事。
Change min-height
to height
for your body
and html
- see demo below: 为你的
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>
You can also give height: 100vh
to the main
element to set an instrinsic height for the flexbox - see demo below: 你也可以给
main
元素赋予height: 100vh
来设置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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.