Sticky Footer in CSS3 + HTML5

Question

I'm learning CSS3 and HTML5 and was curious on the best practices for sticky footers. Any box/flex/cool properties I should know of?

Step #1: Google "html sticky footer" Step #2: ???? Step #3: Profit — Jeffrey Ray, Jan 29 '13 at 20:37
You could start by looking at what all properties [CSS](http://www.w3schools.com/cssref/default.asp) has to offer... — War10ck, Jan 29 '13 at 20:38
I know how to build sticky footers, I'm just curious if there are any new best practices for CSS3 — Elijah Murray, Jan 29 '13 at 20:48
See this working example, using absolute positioning and hiding overflow in your main content area. You can also use floated layouts within your content areas this way: http://stackoverflow.com/a/20114486/618649 — Craig Tullis, Dec 01 '13 at 21:27

score 0 · Answer 1 · answered Jan 31 '13 at 21:02

0

This works for me, seems to be the simplest solution I've found:

<style type="text/css">
   html,body {
      height:100%
   }

   #wrapper {
     min-height:100%;
     margin-bottom:-150px; /* negative total computed height of footer */
   }

   #footer_padding {
     height:150px; /* total computed height of footer */
   }

   #footer {
     height:100px;
     margin-top:50px;
   }
</style>    


<div id="wrapper">

   <div>some content...</div>

   <div id="footer_padding"></div>

</div>

<div id="footer"></div>

answered Jan 31 '13 at 21:02

bluemoonballoon

299
1
2
8

This is not HTML5 but XHTML/HTML4... Well, to be exact, it still works for HTML5 but this offsets the HTML5 outline.. – Yannis Dran Feb 24 '13 at 04:15
You could add in some HTML5 by using `#wrapper:after{ content: ""; display: block; height: 150px; }` instead of having the footer_padding div. Idea is from: http://css-tricks.com/snippets/css/sticky-footer/ – Luke Dec 06 '13 at 19:22

score 0 · Answer 2 · answered Dec 27 '14 at 21:17

You probably do want to utilize flexbox, check out A Complete guide to Flexbox. I've included an example below:

html,body {height: 100%; width: 100%; margin: 0em; padding: 0em;}
    #container {display:flex; flex-direction: column; min-height: 100%;}
    #content {flex: 1;}

<html>
<body>
  <div id="container">
      <div id="content">
        Blah blah blah.., I'm the content..
      </div>
      <div id="footer">
        Look down here.., I'm the footer!
      </div>
  </div>
</body>
</html>

Sticky Footer in CSS3 + HTML5

2 Answers2