Question

如何设置以下div的样式：

<div id="parent">
   <div id="top"></div>
   <div id="middle"></div>
   <div id="bottom"></div>
</div>

这样第一个子div有一个固定的高度，比如200px，第二个div有自己孩子的高度，最后一个div跨越屏幕的其余部分？我在第二个div中有一个span元素，可以是任意长度。所有div都有100％的宽度。

更新：不确定为什么人们会对此进行投票。我需要类似于WPF Grid的布局：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="200" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
</Grid>

Answer 1

这就是你要找的东西：

<html>
<div style="height:200px;">
</div>
<div>
    <table width=100px height=100px border=1;><tr><td>test</td></tr></table>
</div>
<div style="width:100%;height:100%;">
    <table width=100% height=100% border=1;><tr><td>test</td></tr></table>
</div>
</html>

CSS中的固定，自动和百分比高度div

1 个答案: