IE6 "frame" layout with 100% height and scrollbars
- by Joe
I want to achieve a simple "frame" layout with fixed header, fixed left navigation area, and a main content area that fills 100% of the remainder of the viewport with scrollbars if necessary.  My best attempt is below - but when I add enough content to the main div to force scrolling, I see that the scrollbar extends below the bottom of the viewport.
What am I doing wrong?  Or what is IE6 doing wrong and how can I fix it?
NB please don't recommend using a more recent browser - I'd love to but can't.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
    html, body
    {
        height:100%;
        margin:0;
        padding:0;
        overflow:hidden;
    }
    div
    {
        border:0;
        margin:0;
        padding:0;
    }
    div#top
    {
        background-color:#dddddd;
        height:100px;
    }
    div#left
    {
        background-color:#dddddd;
        float:left;
        width:120px;
        height:100%;
        overflow:hidden;
    }
    div#main
    {
        height:100%;
        overflow:auto;
    }
    </style>    
</head>
<body>
    <div id="top">Title</div>
    <div id="left">LeftNav</div>
    <div id="main">
    Content
    <p>
    Lorem ipsum ...
    </p>
    ... repeated several times ...
    </div>
</body>
</html>