Vertically fixed header and footer, scrollable content, horizontally centered

0
votes

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.

2
htmlcss
You should provide some code with your question. - Rudy

2 Answers

0
votes

It looks like you are combining multiple question into single one :)

I am coming up with solution for your many points. Go through the jsfiddle below and let me know how much it helped you.

 <div class="wrapper">
<div class="container">
 <header></header>
 <div id="content">
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>

<p>HELLO</p>
<p>HELLO</p>
<p>HELLOWEEN</p>
 </div>
 <footer></footer>
 </div>
 </div>

Jsfiddle Demo Here

0
votes

hey too many questions to answer here so i've created a jsfiddle for you

jsfiddle

$(function() {
    $('#content').css('min-height' : $('body').height() - $('header').height() - $('footer').height() + 'px')
});

take a look at this new jsfiddle i've managed to make header scroll horizentally, you can do the same for the footer