among the 10k+ SO questions with fixed/sticky bottoms and headers I could not find the following (it gets interesting starting point #3 onwards).

I am looking for a design in a multi page web site where:

* the header is sticky to the top
* the footer is optional (depending on the page in the application) but if existent sticky to the bottom
* header, content and footer are aligned center and have a fixed width (1024px), any space to their left and right on a viewport wider than this is meant to be filled with a different color (whether via html/body background color or via divs)
* if the viewport is narrower than 1024px we need horizontal scrolling for the whole page (one scrollbar for all header, content, footer at the page bottom)
* the content needs to be scrollable, scrollbar to be placed at the page, not the div
* if content is not having enough content to fill the space between header and footer (or page bottom, if footer is no existing), it's background shall still fill up the whole space between them
* page, header, footer and content all have different background colors (actually header and footer have the same), so any gaps look very unpleasent
* there are ajax/jquery based JSF components on the content that affect the height of the content after page load

Layout is to look like this:

```
+-+----------+-+
| | header   | ||
| +----------+ ||
| | content  | ||
| |          | ||
| |          | ||
| |          | ||
| +----------+ ||
| |footer    | ||
+-+----------+-+

```

No need to support out-dated browsers.
jquery is an option if css-only solution is not possible.

There are plenty solutions out there and on SO including jsfiddles, that come quite close, i.e. <http://jsfiddle.net/7S4Xx/>
but solutions lack always the vertical scrolling for smaller viewports and either content background taking up the whole space or content scrolling, which is similar to how far I got.
Help is highly appreciated.