HTML5 / CSS3中類似WPF的布局

Question

我怎樣才能達到以下效果：

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

頂部和底部的行占滿400px后，具有高度*的行會填充剩余的屏幕空間嗎？

謝謝

Answer 1

您可以使用div來實現

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

}

Answer 2

這應該可以解決問題：

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

}

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



}

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


}

干杯。