CSS or Table 'Dock Layout' Solution for Non Scrolling Header?

Question

I have a variable height header that doesn't scroll with the content below it. The content will act like a regular web page, with overflow=auto, constrained to the size of the viewport.

I have yet to find a table-free CSS solution, and using tables overflow doesn't work correctly - the bottom table row is not constrained to the viewport height - header height.

This seems a rather simple and common problem. Has anyone come up with a working solution? I am able to ignore IE < 8, if that helps.

Answer 1

Since you're not supporting IE6, you can set the header to position: fixed to prevent it from scrolling with the document.

Note that the scrollbar will still extend to the top of the header, so you should add padding to the top of your content so that when it's scrolled to the top, it doesn't end up behind the header.