Keeping HTML footer at the bottom of the window if page is short

Question

Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I\'d like

Answer 1

Give this a try.

It is a copy of the styles that Github uses to keep it's footer at the bottom of a page. It is a little hacky, and requires you to know the height of your footer (which may not work for your use case)

Markup

---

Page Content




  
footer-text
  

CSS (well, scss)

---

// our page element

html {
height:100%;
}

body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}

.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}

footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}

The important things here seem to be:

• Setting height: 100% on containing elements (esp html and body)
• Knowing the height of your footer, and accounting for it with a "push" element
• using the combination of min-height height: auto !important and height:100%

Hope that helps!