CSS Sticky Footer, Footer Stick to Bottom of Page

This CSS footer stylesheet will make a footer stick to the bottom of the page. CSS Sticky Footer

Make the Footer Stick to the Bottom of a Page

CSS Sticky Footer is Cross-Browser

This CSS sticky footer code pushes a website's footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers (even the now defunct IE5 and IE6).

View the example CSS Sticky Footer or the HTML5 Sticky Footer.

How to use the CSS Sticky Footer on your website

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

  1. * {
  2. margin: 0;
  3. }
  4. html, body {
  5. height: 100%;
  6. }
  7. .wrapper {
  8. min-height: 100%;
  9. height: auto !important;
  10. height: 100%;
  11. margin: 0 auto -4em;
  12. }
  13. .footer, .push {
  14. height: 4em;
  15. }

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="layout.css" ... />
  4.     </head>
  5.     <body>
  6.         <div class="wrapper">
  7.             <p>Your website content here.</p>
  8.             <div class="push"></div>
  9.         </div>
  10.         <div class="footer">
  11.             <p>Copyright (c) 2008</p>
  12.         </div>
  13.     </body>
  14. </html>

Multicolumn layout with Sticky Footer

Add clear to the .push div

  1. .footer, .push {
  2. clear: both;
  3. }

Adding margins to elements is messing up the footer.

Simply use padding instead, and all your worries will go away.

I put this on my site and it doesn't work right in browser X. You have something wrong with your code!

Check to see if the example CSS Sticky Footer page works in that browser. If it does, then you have something wrong with yours!

Having trouble with the Sticky Footer and ASP.NET?

If you're using ASP.NET, add the following CSS to the Sticky Footer code.

  1. form {
  2.     height: 100%;
  3. }

I don't know web design. Can you help me with this?

I charge for website assistance by the hour, and there's a minimum charge of 60 USD. However, there are plenty of CSS and web design forums on the internet where you can get free help. If you really want me to fix it, send me an email and we can discuss pricing.

The height: auto !important; and height: 100%; properties

I've been getting about an email a week informing me that the footer works fine without height: auto !important; and height: 100%; in the wrapper selector. This is a way to achieve minimum height in IE6 and below, so if you want the footer to stick to the bottom of the page in Internet Explorer 6, don't remove it!

The Original Introduction from 2007

There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they've used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.

Comments

I know it's long overdue that I allow comments on my resources. You can now submit them!
Note: I approve comments before before they appear on the site, so please don't spam.

Vipul Behl September 2nd, 2014

Hi, thank you very much for sharing. I initially had my footer coming in the middle of the page because i was missing "height: auto ! important" line. But after reading your post i was able to get it right.
Thank you for sharing really solved my problem

Mandy Arthur September 2nd, 2014

Adding this code did give me some space between the end of the page and the footer, but the footer still scrolls with the page ( It's not sticking to the bottom.) What could be going wrong?

Ryan Fait September 2nd, 2014

Hi Mandy, you're looking for a fixed footer. I'll create an example for you later.

Mustafa September 18th, 2014

So far this is the most elegant solution i have found. Thank you :)

Leave a comment






Web Design Resources and Articles