Web development, coding & SEO


Footer sticks to the bottom of page

Task - make the footer stick to the bottom of page. Google: "bottom of page css", "bottom of window css".

Result -

Markup

<div class="wrapper">
	<p>Content</p>
	<div class="push"></div>
</div>
<div class="footer">
	<p>Footer</p>
</div>
<div class="hooter">
	<p>Hooter</p>
</div>

CSS

*{
	margin:0;
}
body,
html{
	height:100%;
}
.wrapper{
	min-height:100%;
	_he\ight:auto !important;
	_he\ight:100%;
	margin:0 auto -120px auto;
}
.push{
	clear:both;
	height:120px;
}
.footer,
.hooter{
	height:60px;
}

Demo

Footer sticks to the bottom of the page.

2008