WPF-подобный макет в HTML5 / CSS3

Question

Как мне получить эквивалент:

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

когда строка с высотой * заполняет оставшееся пространство экрана после того, как верхний и нижний ряды заняли свои 400px?

Спасибо

Answer 1

Это должно решить проблему:

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


}

Приветствия.

Answer 2

Вы можете достичь этого, используя 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%;

}