I'm creating a new website with a Zen 7.x-5.x subtheme. I've been trying to get this to work but it just won't do what I want.

What I would like is for the header and footer to stay where they are while the content scrolls if necessary.
The footer should stay at the bottom of the page at all times.

I've almost got it right except that the content area is higher than the window, leading to two scrollbars (one for the window and one for the content, if that is longer than the content area) and the content runs through the footer.

ETA: The fixed header and footer works well in most browsers so far. Thank you! Had to fiddle with z-indexes to make it appear the same in FF and Chrome and the android browser on my tablet. I did have to drop the dynamic width in order to get the page centered.

The page area is 960px wide and has a different background color than the body. In order to have that background color go from top to bottom I have to add min-height: 100%; to #page but that results in a scrollbar even if the content is not higher than the window. Removing the margin-top will stop the scrollbar appearing but of course this results in the content moving up to the top of the window behind the header. I've tried various variations of margin-bottom and padding-bottom include negative values but it doesn't seem to help.

Somehow I have to make the page be 100% - header (min-)height; because this way the header height gets added to the bottom of #page resulting in a scrollbar.....

#header is inside #page but because of the fixed position of the header and the top margin on page things get problematic. That's why the height of the header still counts for the #page and gets pushed down by the margin.

So the clue is to put the top margin on #main instead and position #page absolutely to the top.

The final problem I have now is that this layout acts rather strange in my android browser (when zooming things jump all over the place). So I'll have to make a separate CSS without fixed header and footer for android or drop the whole thing after all....