drilix.com

Freedom, Community & Sustainability

HTML/CSS: make footer stick at the bottom

January 2, 2011 -- Webmaster
Last modified on August 2014
Duration: 5 minutes or less

One of the most wanted tips out there: the sticky footer. It' amazing how easy it is to make a perfectly working sticky footer but it seems so hard to get it right. On this example I'll make a footer that will stay at the bottom of the page when the content do not exceed the page height. It will go further down if the content pushes it down (that is: the footer will never be on top of the content).

The HTML content

<html>
<body>
<div id="maincontent">
Main content.
</div>
<div id="footer">
<p> Footer content </p>
</div>
</body>
</html>

This HTML code contains a div tag named "maincontent". The main content of the page will actually push the footer down. Your footer is put into a div tag identified as "footer". This allows us to give specific instructions into the CSS file on how this footer should behave.

The CSS layout

html, body {
height: 100%; /*makes page take up all height*/
}

* {
margin: 0; /*margins could ruin it*/
}

#maincontent {
height: 100%; /*pushes sticky footer to the bottom */
}

#footer {
  height: 50px; /* adjust the height of the footer */
  margin-top: -50px;/* numbers must be opposite */
}

You can freely change the parameters, the comments are quite explicit on how changes would reflect on the page. Now just experiment and have fun!

Add new comment