Question

为什么“Box 2”没有填满整个（可用）空间？高度：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:#ccc;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/

谢谢！

Answer 1

这是因为父#container元素的高度不是100%。目前，body元素的高度由#container元素的高度决定（因为它是唯一的子元素）。由于您使用百分比定义#container元素的高度，因为父级的高度也相同，所以高度将保持不变。

您需要将height / html元素的body设置为100%：

Updated Example

html, body, #container {
    height: 100%;
}

..或者您可以在viewport-percentage units, vh中定义#container元素的高度：

Updated Example

#container {
    height: 100vh;    /* 100% of the viewport height */
}

Flexbox填充剩余高度100％

1 个答案: