how to size a div's height to its container height, using CSS?

Answer 1

You can tell the container div to display as table and have the inner div to display as a table cell.

The HTML

    

        

            My Header
    
    

        

            
1
            
2
            
3
            
4
        
        


        
    
    

        

            My Footer
    

The CSS

#wrap
{
    width: 800px;
    margin: auto;
}

#header
{
    background: red;
}

#main
{
    display: table;
}

#nav
{
    background: gray;
    width: 150px;
    display: table-cell;
}

#primaryContent
{
    background: yellow;
    padding: 0 .5em;
    display: table-cell;
}

Fixes for IE

    #wrap 
{
    width: 800px;
    margin: auto;
}

#header, #footer
{
    background: red;
}

#main 
{
    background: url(../bg.png) repeat-y;
}

#nav 
{
    background: gray;
    width: 150px;
    float: left;
}

#primaryContent 
{
    background: yellow;
    margin-left: 150px;
    padding: 0 .5em;
}