div应填充可用空间 - 显示表扰乱我的布局

Question

我已经做了很多研究，我发现我应该使用display: table;和display: table-row;来解决我的问题，但这种方法完全扰乱了我的布局。

目前它看起来像是：

http://jsfiddle.net/f07dkm8u/

并且在描述的jsfiddle中我想扩展我的div以填补高度。

谢谢！

Answer 1

您可以使用flexbox制作所需的布局。提供容器display: flex并使用flex-direction: column水平对齐。

子项目需要设置flex: 1，它会随着剩余高度而扩展和缩小。

检查浏览器支持：Can I use

＆＃13;

＆＃13;

body,
html {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#top {
  width: 100%;
  height: 100%;
  background-color: yellow;
  display: flex; /* Add Flexbox model */
  flex-direction: column; /* Horizontal alignment */
}
#head {
  background-color: red;
}
#content {
  position: relative;
  width: 500px;
  margin: 0 auto;
  background-color: orange;
  flex: 1; /* Expand with the parent element */
}
#bottom {
  height: 50px;
  width: 100%;
  background-color: blue;
}

＆＃13;

<div id="top">
  <div id="head">
    I don't know this height;
    <br/>
    <br/>
    <br/>End :)
  </div>
  <div id="content">
    <div id="a">
      All my Text! :)
    </div>
    <div id="b">
      SomeStuff!
    </div>
    This div should fill up thill my buttom div
  </div>
</div>
<div id="bottom">
</div>

＆＃13;

＆＃13;

＆＃13;