Over a million developers have joined DZone.

CSS Sticky Footer DIV

DZone's Guide to

CSS Sticky Footer DIV

Free Resource
Known issue:
1 Heights and Margins
Using top and bottom margins inside some elements may push your footer down by that margin height, perhaps in a header or the wrap or main 
's themselves. Instead use padding to create spacing inside the element. You'll notice this is happening if your page has little content so that the footer should be on the bottom but you see that your window scroll bar on the side indicates that it is sitting a bit below the window bottom. Go find the offending top or bottom margin and switch it to padding. Be carefull with declaring padding on the main
in another part of your style sheet. If you were to add something like this; padding:0 10px 0 10px; you would end up overwriting the important bottom padding that is supposed to be the same as your footer height. This would cause your footer to start overlaping your content on your longer pages (in Google Chrome). 2 Font Sizes When setting font sizes in your style sheet, if you use relative sizing be aware that some viewers may have their monitor settings create bigger font sizes. In some elements, like in the footer itself, it could break the height settings and create a gap below the footer if there is not enough room left for the text to expand lower. So try using absolute sizing by using px instead of pt or em. Or simply leave plenty of room for text in your footer to expand. 3 .NET Platforms When coding sites for ASP.net where each page is inside a
tag, be sure to add the form tag to the height:100% statement, else it will break the sticky footer. Like this: html, body, form, #wrap {height: 100%;} //HTML
/* put your content and sidebar here, if you need 2 column layout, use float.*/
//CSS html, body, #wrap { height: 100%; } body > #wrap { height: auto; min-height: 100%; } #main { padding-bottom: 150px; /* must be same height as the footer */ } #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}