Home/ Questions/Q 6545479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T11:35:26+00:00

I have a header element and a content element: #header #content I want the

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0