A true sticky footer with a fixed header?

Question

First of all, please read this whole question so you can fully understand what i am looking for, Thanks!

This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?

How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.

Here is what i am aiming for (Please excuse my great Photoshop skills) :

This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly 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 GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.

I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?

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

Looks good right!, but some of the content is hidden under the header? Lets fix that 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 my sticky footer?

Answer 1

One potential solution is to swap your content:after to content:before.

Working Demo

CSS:

/* .content:after {
     content: "";
     display: block;
} */

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