I wish to have a page that has a fixed height (without scroll bars). Then underneath the header a fluid height div that does have a scroll bar(not the entire page). Also, the width is to be fluid on the entire page.

This is illustrated below: alt text

attempt so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
    HTML,BODY
    {
        height:100%;
    }
    .fullContainer
    {
        width:80%;
        height:40%;
        overflow:auto;
        position:relative;
    }

    /*-- Can only modify these --*/
    .header
    {
        height:40px;
        background-color:#eeeeee;
    }
    .content
    {
        overflow:auto;
    }
    .contentContainer
    {
        height:100%;
    }
    /*-- Can only modify these --*/
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>before content...</div>
<div class="fullContainer">
    <div class="header">Header</div>
    <div class="contentContainer">
        <div class="content">
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            <div style="width:1000px;background-color:#ccffcc;">long text</div>
        </div>
    </div>
</div>
<div>after content...</div>

</body>
</html>

No, i cant change the "fullContainer"'s style, its part of existing code.

problems:

IE6: fullContainer has scrollbars

IE7: fullContainer has 1 vertical scrollbar, content has vertical and horizontal scrollbars

Firefox:fullContainer has 1 vertical scrollbar, content has horizontal scrollbar

chrome:fullContainer has 1 vertical scrollbar, content has horizontal scrollbar

I do not want fullContainer to have scrollbars. It has overflow auto, so i have to be careful my content does not extend it.