html - 如何让div占据剩余的垂直空间

Question

我的布局如下-

<div style="height:100px;border: 1px solid #F44;">
  <div style="background-color: #ccc; padding: 4px;">Title</div>  
  <div style="background-color: #a0a; padding: 4px;">Content</div>  
</div>

包含内容的第二个 div 贴在标题 div 的底部。现在我希望能够让 Content div 占据剩余的 75px 高度。问题是 顶部 div 的高度不固定。这是问题的演示 -

http://jsbin.com/pirus/2/edit

Answer 1

试试这个

<div style="height:100px;border: 1px solid #F44; overflow: hidden">
    <div style="background-color: #ccc; padding: 4px;">Title</div>
    <div style="background-color: #a0a; padding: 4px; height: 100%;">Content</div>
</div>