WPF-like layout in HTML5 /CSS3

Question

How can I achieve the equivalent of:

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

whe the row with height * fills the remaining screen space after the top and bottom rows have taken their 400px?

Thanks

Answer 1

You can achieve this by using div(s)

<div class="upperSection">

</div>

<div class="content">

</div>


<div class="lowerSection">

</div>

and 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

This should fix the problem:

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


}

Cheers.