Works great if you can apply a fixed height to the footer.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}See the Pen Sticky Footer by Chris Coyier (@chriscoyier) on CodePen.
Note that this clearfix is the only one with a dot (content: “.”;) instead of a space like in the “Force Element To Self-Clear it’s Children” snippet.
Helbrand
Thanks for the explanation! I’m really struggling to understand the nuances (like “dot” and “space”), how they can be applied not just in reactionary ways, but in ways that are pro-design.
thank you for this. i prefer going by trail and error than reading first. i was trying this footer approach for a long time and then came to know that one of the way to modify footer location incase of “adding content” is to set 100% to body tag and then only height can be set in percentage to other siblings of footer. it took a long time. i would give you a hug if i’m around you
Very neat, I’ll test this in my code.
Note that setting html {height:100%} causes a bug where a bottom-aligned body background image will fail to attach to the real bottom of the body.
Instead it will attach to the bottom of the viewport and scroll up showing ugly space underneath.
The solution is to apply your background to an inner element or maybe your design will work with background-attachment:fixed instead.
Another brilliant bit of code from you Chris, thanks
Note, that sticky footer falls short in Opera and IE8. Open the page in each, have your browser window halfway open, now drag the window down, now see that the footer does not follow. This one works in all…
Chad this link opens GoDaddy and not a sticky footer…
Actually this link opened a sleazy chat-room for me. I got out of there very fast. Please remove or fix the link.
Removed link, burying thread.
What is the code that you used for the main menu of snippets?
CSS
HTML
HTAccess
Etc.
A demo would have been better.
There is a demo now.
@iTechRoom
I am trying to remove the footer of my WordPress.com blog, and was wondering if there was anyway to do so without having to purchase the css upgrade, and if so what the code’s would be. I am new to the whole wordpress thing, and know little to nothing about coding. Please help!
remove the php call to get the footer?
Remove this line at the bottom of your index.php or pages.php (et al).
PHP not showing.
Here it is again. Removed the “” at the end.
?php get_footer(); ?
what the heck is this for :
body (&rt;'s) #wrap {height: auto; min-height: 100%;}
I am used THIS tricks on my project web site so is very use full me this tricks
I am a B.C.A. Student in gujarat FROM india
Thanks CSS-tricks
I’m too from India. Every time someone comments without good grammar, I assume it is from India. Please try to learn good English. As a programmer or even as someone who uses a computer, it will definitely help you in the future.
I’ve been using something like this for years.
Is there a better way to do this now with css3?
this is what i’m looking for.. thanx
hi,
thank you for the code,but I’ve got a problem with firefox (mac-osx).
Does anybody have the same problem??
OPS! I was wrong… there was a comment in html code that disturb in firefox, I’ve deleted it, now it’s ok.
Thank you indeed, great article!!
Thank you! It worked well on my project website.
Great snippet. I will be using this all the time.
But I had a problem of large background images on the body disappearing further down the page once you scrolled.
Solution:
add overflow: auto to the second line in the CSS.
html, body, #wrap {
height: 100%;
overflow: auto;
}
@Michael Ware: That works great! I had a basic sticky-footer setup, a repeating bg-image in the <HTML> element, and a fixed bg-image in my <BODY> element. I was having the same issue/bug where the <BODY> bg-image cut-off at the browser viewport bottom. Adding “overflow: auto” to the <BODY> element fixed this bug, but do you know if it works (and doesn’t cause other problems) on other browsers?
Works perfect with the overflow, for me. Gracias
Great Post! but…
I tried to implement it on my own website, but it seems that the negative margin value isn’t working for me. Althoug the content isnt very high.
It positions my footer exactly “by the height of my footer” below the viewport.
Could anyone help me out. It would be greatly appreciated!
Cheers Sam
The simplest and most compatible sticky footer I know of is Ryan Fait’s Sticky Footer. It’s been a long time since I ran across it, does anyone know if it has any problems? I have yet to run across anything.
That’s the same as the one here, except that this one uses a pseudo-element instead of requiring you to add something.push to your markup.
Most of sites don’t ever need sticky footer, because all pages are taller than one screen. Always.
No.
Completely wrong on this bud.
Hi guys,
I’ve tried to glue a megamenu into the header without any success, it seems to break the ability for the footer to float correctly anymore… Any Suggestions?
Hi Guys,
How would I get this to work in HTML5, wouldn’t this conflict with the CSS in the boilerplate? or would I just put the code in the authors section?
I’ve answered my own question… Genius, the guy’s have thought of everything, I take my hat off to Paul Irish and the rest of the team.
Really like this one!
I’m not pretty sure, but I think that
#wrap should have margin-bottom with value of #footer height :S
Thanks, but I’m having issues in Firefox with this Snippet :/
Variable height sticky footer: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Looks promising. Anyone tested this?
I’m testing it, with more or less a layout like this:
pseudocode:Probably not the best layout, but hopefully enough to get me started. Also, have to consider how to at least get it looking OK in the recent ie10, for instance, using this chart of who’s supporting CSS Flexbox: http://caniuse.com/flexbox
This is awesome, definitely a simplified version of what Matthew James Taylor came up with. Thanks for sharing.
Hey, I’m getting a bug with this method in google chrome (windows), although it could just be my computer. When I resize the window until a scrollbar shows, refresh the page, and then maximize, the footer jumps to the base of the content. This bug is showing on cssstickyfooter.com, and anywhere else using this method. Any ideas on a fix for this?
I’m sorry, but this didn’t work for me… I had to apply position:fixed and bottom:0 to my footer to let it work, without any of the code put here. However, perhaps it’s ’cause I was trying to use it in DotNetNuke. Works kinda differently with preset styles and such, probably. But hey, this got me going, so thanks anyway ;D
Yeah!!! Taarique Debidin you are my man !
I am using it in quite a complex system and had the same problem.
Applying position:fixed and bottom:0 to the footer was eventually all I had to do.
Thanks for this solution! My footer was pretty stubborn.
I am applying the technique of Styck footer on my site, but my content needs to be aligned both horizontally as vertically in the #main. But due to the “botom padding-bottom: 180px” when this must be the same size of the footer, my #main does not line up vertically. If I take off this padding, and put some value at the #main height , this works!, but my footer is not always at the bottom. How should I proceed in this case? I need some help!!
It worked! Thanks for the trick :)
You should upload demo on your this tutorial, it will helpful.
It would be great have a demo, thx!
If you add box-sizing: border-box; to #main, it will draw the padding-bottom into the height of #main. This solved an issue I had with giving #main a height of 100%.
Thanks this was a big help!
I appreciate the help.
How about James Dean’s sticky footer trick? It’s very neat, no special markup needed. It’s all done with CSS. Check it out: http://mystrd.at/modern-clean-css-sticky-footer
I’m confused as to why you can’t just set the footer to position: fixed? It seems to me that it would be a whole lot easier to accomplish it this way. Does it not work in IE or something?
Sometimes you need the footer to remain in the flow, for example when dealing with backgrounds on the main section.
Here’s some nice SASS to use with this :)
Working like charm………… :) <3
Noticed a few people were having a problem with the background not extending beyond the browser window dimensions. After coming across the same problem myself I settled on this fix:
Change this:
To this:
Hi,
If .page-wrap has position:relative, links in the footer are “covered” and do not work.
Any solution for that?
Thanks
This is just GREAT!!! Thanks!!
Why does this break when I have “Position: Relative;” set to the main content Div? My main content div needs to be position relative due to the layout I have. Anyway way to make it work? Thanks!
can someone explain the purpose of the Lorum Ipsum JS that is appended to the .page-wrap? Much appreciated. thanks!
Also, I had issues in IE 8, but I just added a float: left to the footer and that resolved it.
The Lorem Ipsum is only there for the purposes of the demo. Take a look at the results tab.
Thanks!
Sir i have a small weblog which is completely responsive in design i like everything about it but the thing creating some problem is that the site is not full width and when i try to change its width it looses its responsive behavior to various screen sizes,so i was thinking that could you please have a look at it and help me converting it to full width.
The other option i was thinking about was to add two sticky sections to the site one at the left and one at the right but i have no idea how to do that(i mean creating sticky sections is easy but how to place them at the desired portion of my site without compromising with the responsiveness is bit difficult) i would be really very thankful to you for your suggestion and help
Awesome Chris! Thanks for sharing this. I’ve seen it done before, but didn’t really think about implementing it until it came across a mock up. I knew I could hit up your site for the snippet of code that I needed.
I thought using
{margin:0}
was bad practice…
The asterisk in my post got dropped. I meant to say that I thought using an asterisk to select all elements on the page to reset the margins to zero was considered bad practice. At least, I read that somewhere.
The basis for that thinking is that that selector needs to select all elements on the page and that’s slower than something more specific like an ID selector which only has one match. That’s technically true, but it will not make a perceptible difference in any kind of speed test. Except in truly extreme circumstances. This has largely been true for a decade, so anything we can do to stamp it out this perception would be awesome. Write CSS selectors that work for you and don’t worry about selector performance all that much.
.page-wrap {
min-height: 100%;
}
.page-wrap:after {
content: “”;
display: block;
}
Just this little piece of code fixed it for me, now not matter how far I zoom my page out my footer is sticking to the bottom of the page, thanks for the help friend :)
Hi,
Used this technique, so now there is a layout with .page-wrap and inside it comes the header, below is the content, and after .page-wrap comes the footer.
Now there is a page in which i need to center vertically a div in the content area. The width of the div is known but the height is not.
Is it possible to do it?
Have tried options of absolute table(css) but without success.
Thanks
Thanks,
works great!
This is my Sass mixin
I works great, although I have solved the bottom margin issue just by adding “overflow:hidden” to the footer.
Great post.
There is a bug in IE7
The footer cuts the body content
Can anybody help?
Regards!
Hi,
I implemented the above code in my project. But it didnt worked at all.
the footer is visible in the center of the content.
Pls help
This looks a lot like a solution I’ve been using for a while, but a bit more complicated and I’m wondering if I’m missing something. The cons for both are the same: must support
min-height(IE8+) and must know footer’s height.I guess this way your
.site-footerwon’t be automatically 100% wide (simple fix, of course:width: 100%). But … am I missing something else? Here it is on codepen.There’s one thing to note in mine, but it (I think) applies to yours as well: with a body (or container) at
min-height: 100%and no toppadding, if you start with something that has a top-margin or end with something that has a bottom-margin it will extend beyond its parent; that is, if the first thing inside yourbodyis a marginedh1, theh1‘s margin will cause thebodyto essentially have a top-margin, which will mean the page will never be as short as 100% (it’ll be 100% + margin value), and will always scroll. In my codepen example I accounted for this by adding a bit ofpaddingto the top of thebody.Curious your thoughts, and if I’ve overlooked something that would necessitate the extra containers etc.
The issue with making the footer’s position fixed or absolute is that it is always visible. So if you have a site where the height differs depending on the page you are on, then the footer doesn’t appear at the bottom of the actual page, but rather the bottom of your browser window.
That’s true of
position: fixed, @Ottaz. But notposition: absolute– not if the container element (the element withposition: relative– in this case, thebody) extends beyond the viewable window. Which it does in my example. Theposition: absolutefooter is positioned absolutely to the bottom of thebody, which is (and of course should be) at the bottom of the viewable content).Thanks Ben, this is the best way I’ve found to have a sticky footer.
Kudos :)
This is fantastic! Thank you very much Chris.
You reference ‘.push’:
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
but I see no item with the class-name ‘push.’ Perhaps this is from an earlier version of the article?
Great method indeed. Unfortunately I am having a different situation where, I have a Header above the main content area and a footer below. So I have made a code like this:
It seems to be working great. but is it good to use this method?
This does not works correctly when the height of the footer reduces. So this is not the sticky footer.
If you’re using border-box box sizing (https://css-tricks.com/box-sizing/, supported on IE8+), you can just add bottom padding to counter the bottom-margin on the .page-wrap and remove the code that adds the “push”.
Hey Chris. Thanks for this! Working great everywhere except on ONE page.
Not sure what it is about this single page that has the footer drop off the bottom.
Anyone see what the isssue might be?
http://kennlucas.com/contact-thanks.htm
I know it’s a bit old hat but isn’t it just easier and pretty much bulletproof on any browser to use a table like the old days? Yeah it’s old but it’s also tried and tested. Something like this works exactly as expected: http://jsfiddle.net/L6daa/
I used this code. working fine with IE8+. is there any hack for IE7. please help
I like to avoid unnecessary wrappers.
I set HTML to height:100%, BODY to min-height: 100%, and then add BODY:AFTER to create space for the footer. No wrappers.
Works Great! Thank you so much!!! : )
I was fucionado correctly, and the amendments made in the comments are very useful.
after using the code, I have a situation where the footer shows a white space on the right?
any idea?
Try it in different browser and see if the page rendered differently, if you so, include a css reset into your page.
This works well if you are not using normalize.css if you are, the top margins of some elements will offset the footer.
I have used this method many times, but on my first website using normalize. I ended up switching to James Dean “Sticky Footer” as mentioned in a post before. Does the trick with normalize.
http://mystrd.at/modern-clean-css-sticky-footer/
just realized there is something ‘wrong’ in this example. the example says this:
/* .push must be the same height as footer */but there isn’t a class called push. it should say something like
/* .page-wrap's margin-bottom must be the same height as footer*/Good catch I’ll update that code example. Burying cause no longer relevant.
Best method so far I have seen, nice work.
This method worked in everything down to IE8 on a site with a complex layout when several other go-to methods did not. This is now a go-to method!
Cool. This worked great, and it is nice and tightly put together. I tried many approaches, though, this one worked best for me. Thank you.
Hey! I love this. It’s simple and helpful.
I implemented a “border-radius: 10px;” for a bit more style.
excellent! I’ve tried a lot of options but this is just perfect!
If you leave some kind of margin between
.page-wrapand the footer, the latter will be cut by the measure of this margin by the bottom edge of the viewport. The easiest solution is to convert this margin to padding of either.page-wrapor footer.Very excellent help / tip! Thanks :)
This causes problems with gradient backgrounds. The gradient stops at the beginning of the footer.
HTML/CSS need a default option for sticky footers instead of all these workarounds…
Thanks man. I was trying to figure out how to fix that problem and now it’s fixed using your method thank you very very much!! This method works 100% thank you again :)
Hi. This is a great fix.
I do have a problem though…
When there is little content, my content section only goes up to a certain point, after which I am left with a white gap (which is the default colour of my body) until the footer. I have the content height:100% so it’s a bit perplexing. The height of my content seems to be fixed and is unable to surpass a certain point.
Anyone have any suggestions? (You can see this at http://www.jamesstok.es )
Thanks
I have a problem where I have a slider that’s on the top in my preview, but when I upload it to the server it goes to the bottom right above the sticky footer.
???
I have a problem where I have a slider that’s on the top in my preview, but when I upload it to the server it goes to the bottom right above the sticky footer.
???
http://www.gatheringplace.us/Site/home.html
I’ve been using something similar for years now. :D
We have a variant on this technique that only requires a min-height to be set and works nearly with Bootstrap 3. Check out the example here:
http://mnmtechconsulting.com/proper-sticky-footer
Sometimes it helps when you add height to
I wrote a small article about that matter using viewport units https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
How come this doesn’t work on Firefox?
Hey guys. I’m just starting out wuth web development and I’m not getting what this part of the CSS code does:
.page-wrap:after {content: "";
display: block;
}
I’ve played with it in CodePen and I see that the stcky footer doesn’t work without one or the other. Still, I don’t see what it’s doing.
Thanks guys :)
The page-wrap div should be the first and last div in your code just before your footer.
the :after selector will push the footer below all the content .
I think
It explains it a bit here
http://www.w3schools.com/cssref/sel_after.asp
I’ve done something similar with mixing the ‘vh’ property and the CSS3 ‘calc()’ method – works almost everywhere (except older IE versions).
Because it’s really easy to use in any kind of theme/framework, i think it’s one of the quickest and most future-proof solutions to get a sticky footer.. Feel free to correct me if I’m wrong.. ;)
thank you! this solved it easier. with the method in the article i had an issue in ie11.
the issue in ie11 was that i used main tag as page-wrapper and that doesn;t have display:block defined so after elements don’t work correctly.
My favorite solution!
I think you can even drop out the:
html, body {
height: 100%;
}
because ‘.page-wrap’ is no longer parent-dependent thanks to ‘vh’.
Hi, thanks for the help ^^
I have tried this and it works perferctly on chrome desktop.
I dont think this is working on mobile phones no?
Thanks
Not working. Why do you think can be?
Great tutorial. I was looking for something to work around/with Adobe Edge and this was perfect. Thanks
This can be achieved easily using
flex-box:For years I’ve been using this method, but then recently I saw the Bootstrap way of implementing the same. I was just wondering how effective is it to apply “position: relative;” to the “” tag. Is it a proper way of doing it? I thought the html tag was not to be fiddled with.
I meant to ask if using these styles are good practice:
‘html{ min-height: 100%; position: relative;}
footer{ position: absolute; bottom: 0; width: 100%; height: 60px;}
body{ margin-bottom: 60px;}’
This would make the footer sticky in most browsers. But not sure if its proper coding etiquette. What do you think?
When you set the html and body elements height to 100%, the window.onscroll event is not fired even though scrollbars appears and the page is scrolling…
Does this method just not translate well to legacy?
Simple and best solution. We don’t need to add
height 100%on html and body tag in this caseI used your technique Adam. Works for me.
just a wast of time:)
Footer Sticky (table): http://codepen.io/edalis/pen/oLEgGJ
Footer Sticky (absolute): http://codepen.io/edalis/pen/VjyNLE
It think this example is better with the wrapper child of body.
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
Works flawlessly, thank you
If you happen to have an
inline-blockelement, you might want to addvertical-align:middle;too, to avoid the unwanted vertical scrollbars on some browsers.Example
HTML Code:
CSS Code:
I think it work better by managing the footer in absolute
http://codepen.io/anon/pen/woPOdX
Thank you very much!!. I was looking for this since some time ago!
Just wanted to mention that you can have a sticky footer without crazy hacks, here you go:
See the Pen Sticky Footer by nicolasmn (@nicolasmn) on CodePen.
These days we can use
position: stickyDemo Pen https://codepen.io/D-Heap/pen/RjwEEr
Does the position: sticky work on all broswers though?
This one works well for basic setup and bootstrap – https://www.prodjex.com/2018/03/create-a-sticky-website-footer/
I’m not seeing this working with shorter pages. It would be great if it would also stay at the bottom of the screen if the content is shorter than the window height
footer {
transform: translateY(100vh);
height: 25px;
width: 100%;
text-align: center;
}
Try this:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}
It will not start your footer off the screen like the OP’s (not-a-)solution does. It will not stay on top of body content like a bunch of the links in people’s dumb comments lead to. It will not ride up the screen on pages with short content. It will act like a sticky footer should: the footer will be at the bottom of the content or the bottom of the page, whatever is longer, so that it is always findable, but never obnoxious.