Webpage: Multiple scroll areas with variable height

Question

I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scro

Answer 1

Try using percentages on divs (and leave out the table). For example, you might set a header at height: 20%, and two middle scrolling divs at height: 70%; width: 50%; float:left;. This leaves the footer div at height: 10%. Changing the contents of the middle divs via ajax shouldn't change their height. But of course, this provides a variable, not fixed, header and footer.

note: these numbers are just for illustrative purposes. You'll need to adjust them, including padding/margins, which are not accounted for.