CSS Sticky Header/Footer and Fully Stretched Middle Area?

Question

With CSS, how can i simply get a page with sticky header and footer which are appearing forever, whenever the page is scrolling or not. I found some sample online, but what i additional want is, the middle content area should be a 100% stretched area between header and footer whatever the browser size is.

I mean, most of the Samples i found, are making Header and Footer sticky correctly.., but these are just floating and actually covering the Top and Bottom parts of the 'middle' content area. That's not what i really want.

Answer 1

Can use absolute position for all 3 elements.

#header,#footer,#content { position:absolute; right:0;left:0}

#header{
   height:100px; top:0;
}
#footer{
  height:100px; bottom:0;
}
#content{
  top:100px;
  bottom:100px;
  overflow:hidden; /* use this if don't want any window scrollbars and use an inner element for scrolling*/
}

DEMO: http://jsfiddle.net/RkX8B/

Answer 2

The solutions presented above work for very simple layout with no border, margin, and/or padding. Many, many solutions that you'll find on the Net will work for this.

However, almost all solutions fall completely apart if you simply add border, margin, and/or padding to any or all of your Divs.

Flex Boxes (CSS display:flex;) are incredibly powerful for this, and they work perfectly with any combination of border, margin, and/or padding.

They can portion your screen space into as many Divs as you need, using fixed size, percentage size, or "whatever's left" for each inner Div. These can be in any order, so you aren't limited to just headers and/or footers. They can also be used horizontally instead of vertically, and can next.

So you could have, say, a fixed-size header, a 20% footer, and a "whatever's left" client area between them that sizes dynamically. Inside that client area, in turn, you could have, say, a percentage-width menu bar at the left edge of the client area, a fixed-width vertical divider next to that, and a client area that takes up "whatever's left" to the right of that.

Here's a Fiddle to demonstrate all of this. The relevant CSS is remarkably simple. CSS Flex Box (display:flex;) Demonstration with Borders/Margin/Padding

For instance, here are two CSS classes that create containers that will flow their contained Divs either horizontally or vertically, respectively:

.HorFlexContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner width */
}
.VertFlexContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner height */
} 

The Fiddle above really shows it all off, though.

For reference, see this excellent article by Chris Coyier: Flexbox Tutorial

Hope this all helps!

Answer 3

You're probably looking for the "position: fixed;" property, and setting the header to top: 0; and the footer to bottom: 0; You might also consider some padding to your "content area" to account for that header and footer space...

From the top of my head you would have something like:

header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; } 
#container {  padding: 100px 0; }

If you're using some kind of background on your container and want to stretch it, a height: 100%; should do...

I've never found a good way to use this kind of layout though... =\