A true sticky footer with a fixed header?

css, footer, html, sticky-footer

Solution

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;
}

Problem

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?

Original source