The header and footer take as much space as they need, and the middle element expands to fill the remaining space.

The footer may have a dynamic height (unlike with absolute position + body padding-bottom), and is always at the bottom of the page.

Final solution

<div id="wrapper">
#wrapper {
    grid-template-columns:auto 1fr auto;


The unit vh is introduced in CSS3 and refers to 1% of the height available to web pages. 100vh is equivalent to Javascript's window.innerHeight.

grid-template-columns:auto 1fr auto sets the children of #wrapper to form three columns.

Elements given size auto will take as little vertical space as possible, leaving the rest to the main.

This solution is supported by all major browsers.