Fixed but resizable header, scrollable body page layout
I'm looking for some CSS tips, or even a JS enabled solution. Target browsers: IE6+, Firefox, Safari.
What I'm aiming for is a layout which has a fixed header, and a scrollable body. The height of the header can change, it will have text on it which may wrap onresize, or which may be changed with JS. Except for the header, the body should fill the rest of the page, and the scroll bar should be inside the body. It cannot extend up the side of the header, so I think something involving overflow: auto is needed. I'm also thinking to position absolute the body div, but then how to work out how much space the header takes up and/or how to detect when the header changes size?