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?

Beckwith

In your first example I'm not seeing any content hidden under your header, it looks like it's working as you're requesting. Am I misunderstanding the issue? – Jaddan

@Jaddan Sorry, i should have made myself more clear. The text, i made drop down, so you could read it. Left me fix it real fast. If you go into Inspect Element on Google Chrome, you can see that it is. – Beckwith

@Jaddan jsfiddle.net/g2ydV/3 – Beckwith

Is this what you're looking for? jsfiddle.net/g2ydV/7 I just added another div block INSIDE of your content to push all of your regular content down as much as the fixed header does. – Potential

@Potential Yes, that is good, but why does the content push the footer down before it even reaches it? – Beckwith

@EliteGamer Your content has a height of 300px. If you get rid of that, then your content will only be as high as your content. – Potential

It works with content-90%, header/footer-10% to, but you can't set line-height in px (it may not fit) in footer. I think the "safest" solution is above - @Potential – Lohr

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

Jaddan

Wow, perfect! One question though. Why does the footer start to scroll down when the content does not ever reach the top of the footer? – Beckwith

You've made your content have a height of 300px. If you remove that then the content will only be as high as the content. – Potential

Ok, awesome. Is there any way i can expand the content to fill the rest of that space? – Beckwith

Not without a lot of trickery. I would suggest using Ryan Fait's sticky footer solution ryanfait.com/sticky-footer. Then you can get away with the content taking up the space it needs to – Potential

I found that you need both the .content:before and .content:after – Schermerhorn

Answer 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

Scotia

Sticky footer does not mean fixed footer. I want the footer to drop with the pages once the content has become greater. – Beckwith

You can position it absolutely, relative to the #wrap-inner. Although I realised that defining the height of the navbar is inevitable, it was only working here because of the margin on the content paragraph. Still, only navbar height needs defining, not footer. jsfiddle.net/davidpauljunior/g2ydV/9 – Scotia

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

Plantation

Answer 4

body {
  margin: 0;
  padding:0;
  line-height: normal;
  height: 100%;
  overflow: hidden;
}

.header {
  background:#3d5084;
  padding: 16px 0 16px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-middle-container {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: calc(100vh - 150px);
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  background: #f1f1f1;
}

 .footer {
   background: #3d5084;
   padding: 11px 25px;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   position: relative;
   z-index: 1;
}

Demo link

Hooks