css - HTML5/CSS3 中类似 WPF 的布局

Question

我怎样才能达到:

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="300">
  <RowDefinition Height="*">
  <RowDefinition Height="100">

高度为 * 的行在顶行和底行占用 400px 后是否填充剩余的屏幕空间？

谢谢

Answer 1

您可以通过使用 div(s) 来实现这一点

<div class="upperSection">

</div>

<div class="content">

</div>


<div class="lowerSection">

</div>

和CSS:

.upperSection
{
    position:absolute;
    top:0;
    left:0;
    height:300px;
    width:100%;
}

.content
{
  position:absolute;
  top:300px;
  left:0;
  height:100%;
  width:100%;
}

.lowerSection
{
  position:absolute;
 bottom:0;
 left:0;
 height:100px;
 width:100%;

}