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 :)

Kevin September 19th, 2014

I got the code working. One small problem, likely something to do with my CSS. There is no space between my paragraphs, headings, etc. Everything is condensed into what looks like a single paragraph. Any thoughts?

I would give you a link, but it's not live yet.

Ryan Fait September 20th, 2014

Add this to your CSS:

p {
  padding: 0 0 1em;
}
h1, h2, h3, h4, h5, h6 {
  padding: 0 0 0.4em;
}

Kevin September 21st, 2014

Thank you!

The extra CSS you gave me worked great!

Piper Hembleton September 22nd, 2014

The universal 0 for margins seems rather drastic and imposes a serious limitation on the css use - there are situations in page design where you need margin not padding.
Is the * { margin: 0; } essential to making this scheme work?
Will margins on the vertical aspect of elements mess up the footer position?

Ryan Fait September 22nd, 2014

Vertical margins will sometimes pull other elements above or below them depending on how things are positioned on the page. You can try html, body { margin: 0; } instead.

It's only when the margins are at the top of the page or in or near the footer that you may experience undesirable behavior. You can definitely use margins in your CSS, it just sometimes causes problems. I wish it weren't so!

Piper September 22nd, 2014

I always start with html, body { margin: 0; } anyway, so I'll press on, avoiding margins at the top and bottom.

Thanks for your comments

Titus September 25th, 2014

Thanks you very much!

Goodbye, days of bad footers!

Tony September 30th, 2014

Thanks!

For pages with a lot of content <div class="push"></div> did the trick for me. Without this extra div the wrapper content kept overwriting the footer.

Trent September 30th, 2014

Is it possible to adapt it for footers with dynamic content where the height is unknown?

Ryan Fait September 30th, 2014

Trent, you'll need to use JavaScript to do this with my sticky footer. I'm not sure if there's a way to do that without JS.

Kika October 1st, 2014

Hi,

I try it and it works very well. But there is one small problem. There is small space between the end of the page and the footer. You have the same problem in your example. (Chrome)

I tryed to add some negative margin, but it didn't work. Is there any way how to fix it?

Thank you

Isabelle October 7th, 2014

Thank you.

Christian Simon October 19th, 2014

Great piece and just what I wanted.

a bit frustrated back end designer messing with css October 22nd, 2014

Consider yourself a superstar. Thank you thank you thank you!

as a thank you a little bit debuggin:
Also your "Sorry, you did not pass the human verification." really sucks. I tried hard to post this comment.

Found the reason: I misread your "My name is Ryan Fait. What's my first name?" i thought you were introducing yourself and wanted to know MY first name too (which was not = Ryan)

Also your magic_quotes need to be disabled. It adds backslash to the " on bad submission

Ace October 26th, 2014

Hello I tried this code and it will not work is it because my content is within the coding <div id="content" style="height:700px;width:900px;float:right;">?

Please help I want my content to the right and the footer at the bottom

Alex October 27th, 2014

Is <div class="push"></div> mandatory?
It seems that even witout it all is working fine with just the CSS adjustment. Am i doing wrong without the <div class="push"></div> ???

Ryan October 27th, 2014

Ace:

You need to get creative using background images to get the content to appear to extend to the bottom. Google around for faux columns and you'll get an idea of what you need to do.

Alex:

Yes, it keeps content from slipping under the footer.

Andrew October 31st, 2014

I can't get this to work at all.

I have a minimum width on my content div, but as soon as I remove it, the entire site shrinks up to just the height of the "push" div. The whole point of a sticky footer is to have the footer at the bottom of the document, or the bottom of the page if the content portion doesn't extend below the window.

Roxana November 7th, 2014

Thanks for posting your solution. It is the only code that worked for me after endless hours of searching online.

There is one issue. The content (not including header and footer) occupies 100 % of the page height. So even though the footer is sticky, it is pushed out of sight by the content. I noticed, that the amount to scroll to get to the bottom of the page equals the pixel height of the header and footer.

What could be the problem?

I tried deducting the pixel height form the 100 %, but that only lifted the footer from the bottom of the page. And I tried many more other settings, which either had no affect or would mess things up.

Kamal November 10th, 2014

Thnx for sharing this. Im new blogger . so, it would help me in a very good way. Nice work Ryan

Chris November 12th, 2014

I had always come upon this website and could not figure out what I was doing wrong. I should have paid more attention to the part where you explain nothing can be outside of the container that is not absolutely positioned, and the exact placement of the "push" div.

I still had issues for a moment but then was able to figure it out after months (literally MONTHS) of scratching my head. I work with WordPress and one of the starter themes has a "id=view". This is supposed to help a Firefox issue from the comment in the theme, but I could not find documentation on what that would help with. So like the page says, if it is not working on your site then it is something with your markup. Commenting out portions of your markup and finding the culprit is the quickest way to sanity. Thanks again for this resource Ryan!

Chris Howard November 19th, 2014

Thanks for this, very handy indeed!

Adam Plave November 20th, 2014

Thanks a ton man, this is such a good tutorial. I used the old tutorial and it worked then too. I combined this with a parallax background and it is sweet!

Roger Williams November 24th, 2014

Wow.

This is EXACTLY what I was looking for!
Plus, it worked right away.

Thank you so much.
I am using this to simulate a Solidworks drawing footer with a table. Can't tell the difference!

dataman December 1st, 2014

When i am using it on style.css its working fine but when i am using it on bootstrap.css , its not working. Please suggest appropriate solution.

Anne December 4th, 2014

Hi Ryan,

Your code is amazing, but, when I browse my site using Firefox (for Android), it displays big blank space between my content and my copyright. Seems, the "html, body {height: 100%;}" is giving me the issue. If I change to height: auto, my copyright follows the content right away.
Can help me with this?

Thanks.

Leave a comment






Web Design Resources and Articles