Fixed but resizable header, scrollable body page layout

[DougBTX]

Hi all,

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?

Any tips appreciated!

Regards,
Douglas

[Paul O'B]

Hi Doug,

I think the nearest example I have to what you want is something like this :

http://www.pmob.co.uk/temp/2scroll.htm

However I don't see a way to have the header a fluid height as positioning is important for this layout to work. The height uses ems to allow the text to resize but this would not cater for wrapping.

Hope it might give you some ideas anyway.