为什么“方框 2”没有填满整个(可用)空间? height:100% 被忽略了...
HTML:
<div id="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
CSS:
body {
margin: 0 auto;
}
#container {
width: 100%;
height: 100%;
background: #cccccc;
display: -webkit-flex;
display: flex;
flex-direction: column
}
#box1 {
background: red;
height: 50px
}
#box2 {
background: yellow;
-webkit-flex: 1;
flex: 1
}
#box3 {
background: green;
height: 50px
}
http://jsfiddle.net/618axkjy/2/
谢谢!
最佳答案
这是因为 #container
父元素的高度不是 100%
。目前,body
元素的高度由 #container
元素的高度决定(因为它是唯一的子元素)。由于您使用百分比定义 #container
元素的高度,因此高度将保持不变,因为父元素的高度也相同。
您需要将 html
/body
元素的 height
设置为 100%
:
html, body, #container {
height: 100%;
}
..或者您可以在 viewport-percentage units, vh
中定义 #container
元素的高度:
#container {
height: 100vh; /* 100% of the viewport height */
}
关于html - Flexbox 填充剩余高度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29562596/