True sticky footer with a fixed header?

Question

First of all, read this whole question so that you can fully understand what I'm looking for, thanks!

This is a question that I tried to research for a great time, and made me challenge. Can I have a real sticky footer with a fixed header?

How can I implement a sticky footer with a fixed header? I cannot add padding or margins to the body or content, as this will break the footer. In addition, I want to be able to use width:100% and height: 100% inside my content without overflowing it and creating mess.

Here is what I was aiming for (please excuse my wonderful Photoshop skills):

It looks good when I use position:fixed; and bottom:0; on the footer. But to make it really sticky, I need to add some CSS to my page. (from: http://css-tricks.com/snippets/css/sticky-footer/ )

 * { margin: 0; } html, body { height: 100%; } .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } .site-footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px; } .site-footer { background: orange; } 

This allows me to have a nice, sticky footer, but here's the problem. Some of the content is under my fixed navigation bar.

I cannot add padding or margins to the body, html, or content, because this will make the sticky footer useless. Is there a way to do this without CSS "Hacks"?

This is the content with title: http://jsfiddle.net/g2ydV/3/

Looks good right!, But some of the content is hidden under the heading? Let's fix this by adding a margin to the content: http://jsfiddle.net/g2ydV/2/

The above example works, BUT the footer is messed up. How can I achieve this effect without messing up the sticky footer?

Answer 1

One possible solution is to replace content:after with content:before .

Working demo

CSS

 /* .content:after { content: ""; display: block; } */ .content:before { content: ""; display: block; height: 45px; } 

Answer 2

There is an alternative way to do this with display: table; and display: table-cell , which seems to be becoming more and more popular.

I just offer it as an alternative that deserves attention. It is fairly clean and does not require any specific heights for the header and footer, which is good.

HTML

 <div id="wrap"> <div id="wrap-inner"> <div class="navbar"> <span>Fixed Header (content under here)</span> </div> <div class="content"> <p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p> </div> <div class="footer"> <span>Sticky footer!</span> </div> </div> </div> 

CSS

 html, body { height: 100%; } body { margin: 0; } #wrap { display: table; width: 100%; height: 100%; min-height: 100%; } #wrap-inner { vertical-align: middle; /* optional for positioning content in the middle */ display: table-cell; } .navbar, .footer { position: fixed; width: 100%; } .navbar { top: 0; width: 100%; } .footer { bottom: 0; } 

Demo

Answer 3

this is my fixed header solution

 html { position: relative; min-height: 100%; } #main-container { padding-top: 55px; /* this is header height */ } footer { position: absolute; bottom: 0; width: 100%; }