Harry Harry - 6 months ago 15
CSS Question

100% screen height css

I have a header element and a content element:

#header
#content


I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with
overflow-y: scroll;
.

It this possible without Javascript? Thanks.

Answer

The trick to this is specifying 100% height on the html and body elements. Some browsers look to the parent elements (html, body) to calculate the height.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}