Variable-height header with a scrollable content area that fills the remaining area of ​​the viewport

Question

I have seen versions of this simple problem raised a dozen times here and elsewhere on the Internet, but I have not seen a solution that works for me, but I ask it again.

I need a web page with a variable width full height header (height in content). Below I want the content area to fill the rest of the browser view. If the content is larger than the remaining space in the viewport, I want the content area to scroll.

I do not need this to work on IE6. I don't care if the solution uses CSS, tables or a mixture of them, there are simply no frames and no Javascript.

For the bonus point, correct the variable-length footer at the bottom of the page.

Answer 1

It is not possible to do this only with CSS / tables unless you know how large your two containers are in advance.

If you want to use a bit of javascript, this will work just fine.

<style> body, html { padding:0; margin:0; height:100%; width:100%; } section, header { width:100%; display:block; } section { background:red; } </style> <script> window.onload = window.onresize = function () { document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px"; } </script> <header id="head"> header <br /> two </header> <section id="section"> scroll the rest </section>