Make A Div Fill The Height Of The Remaining Screen Space

383 Asked by Amitjaisawal in Devops , Asked on Nov 18, 2022

I am working on a web application where I want the content to fill the height of the entire screen. The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom. I have a header div and a content div. At the moment I am using a table for the layout like so:

CSS and HTML
#page {
    height: 100%; width: 100%
}
#tdcontent {
    height: 100%;
}
#content {
    overflow: auto; /* or overflow: hidden; */
}   
...
...

The entire height of the page is filled, and no scrolling is required.

For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting header inside content will not allow this to work. Is there a way to achieve the same effect without using the table?

Answered by Al German

There really isn't a sound, cross-browser way to do this in CSS. Assuming your layout has complexities, you need to use JavaScript to set the element's height. The essence of what you need to do is for div fill remaining height:

  Element Height = Viewport height - element.offset.top - desired bottom margin

Once you can get this value and set the element's height, you need to attach event handlers to both the window onload and onresize so that you can fire your resize function.

Also, assuming your content could be larger than the viewport, you will need to set overflow-y to scroll.

Make A Div Fill The Height Of The Remaining Screen Space

Your Answer