css - HTML/CSS : stretching height <div> layout

Question

<div style="width: 800px; height: 600px"> 
    <div style="height: 100px"> 
        top fixed-height row
    </div> 
    <div style="???"> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div> 

在没有 javascript 的情况下创建两行布局的标准方法是什么，其中顶部是固定大小，底部是拉伸(stretch)并适合其父 div？

• 我希望两行的样式是独立的。我在这里找到了几个解决方案，但如果我更改顶行的高度，则底行的样式(例如边距)也需要随之更改。

• 我不需要支持旧浏览器。如果是标准的，那就没问题了。

谢谢!

Answer 1

您可以使用 CSS 中的 display 属性来解决此问题。

工作 EXAMPLE

HTML

<div id="a" style="width: 300px; height: 200px"> 
    <div id="b" style="height: 55%"> 
        top fixed-height row
    </div> 
    <div id="c" style=""> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div> ​

CSS

#a
{
    border: 1px solid black;
    display:table;
}
#b
{
    background-color:red;
    display:table-row;
}
#c
{
    background-color:green;
    display:table-row;
}​