How to consistently push footer at the bottom using CSS?

If an HTML page has very less content then the footer is normally seen halfway up the page leaving a blank space below it. This can look bad on a large screen. In such a scenario web designers are asked to push footers down to the bottom, but at times designers aren’t able to achieve this as they are unaware about certain CSS tricks.

How to push footer down through CSS?

Actually it’s not so complicated. This is done by using a mix of HTML and CSS.

HTML Structure:

[java]
<div id="wrapper">
<div class="header"></div>
<div class="main-content"></div>
<div class="footer"></div>
</div>
[/java]

You would only require four div structures to achieve this. The first is wrapper which covers the entire page content. The second wrapper has three divs such as header, main content and footer. That’s it, the magic happens for this only by CSS.

CSS:

[java]
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
.header {
background:#ff0;
padding:10px;
}
.body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
[/java]

And following is the CSS rule for IE 6 and IE 5.5:

[java]
#wrapper{
height:100%;
}
[/java]

Below is the example image that what is the default behaviour and what will be the desired effect

It will also work in the same way for iPhones, iPods, iPads and other CSS compatible mobile devices.