html - Flexbox 填充剩余高度 100%

Question

为什么“方框 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/

谢谢!

Answer 1

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

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

Updated Example

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

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

Updated Example

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