[css] fill page with divs top bottom content

[Costas]

<div class="header" >
    
</div>
<div class="mainBody">
    
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    
</div>

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;
}

source :
http://stackoverflow.com/a/18665613
http://jsfiddle.net/aslancods/mW9WF/