A true sticky footer with a fixed header?

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

Solution 2:

There's an alternative way of doing this using display: table; and display: table-cell which seems to be becoming increasingly popular.

I'm just offering it up as an alternative worth having a look at. It's quite clean and doesn't require any defined heights for the header and footer which is nice.

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

Solution 3:

it's my decision for fixed header

html {
    position: relative;
    min-height: 100%;
}

#main-container {
    padding-top: 55px; /*  this is header height  */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}