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

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; 
 
}

<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>