DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

CSS Sticky Footer DIV

08.11.2009
| 7337 views |
  • submit to reddit
        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 <div>'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 <div> 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 <form> 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
<div id="wrap">
	<div id="header">
	</div>
	<div id="main" class="clearfix">
		/* put your content and sidebar here, if you need 2 column layout, use float.*/
		<div id="content">
		</div>
		<div id="side">
		</div>
	</div>
</div>
<div id="footer">
</div>

//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 */