[英]Height of Flex Div Not 100%
我身体全高,但最小高度为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>
你可以给.main类一个100vh的最小高度。
.main{
display: flex;
flex-direction: row;
min-height: 100vh;
justify-content: space-between;
background-color: blue;
}
您可能希望通过浏览器进行高度计算:包含块和子项 。 显然, 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>
你也可以给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.