<div id="content">here goes the content of the site</div>
<div id="footer">here goes only the footer</div>
the site_content div has width and height 100%, a min width and height of lets say 800 x 600 and overflow auto: this makes everything the size of the screen, when the screen is to small scrollbars appear for everything. Absolutely positioned so the children relate to it.
content has size 100% 100%, overflow auto. This shows another row of scrollbars, just for the things that should move.
footer, absolutely positioned, width 100% height npx. on top of content. This makes look like it is sticky. The content moves in a separate div beneath it.
when the window is big enough, only the scrollbars of the content appear.
if the window gets smaller, another row of scrollbars appear which pan the entire site.
here is an example (wip, so could get broken every now and then):