CSS Code to make the footer stay at the bottom of a page

CSS - HTML page footer stay at bottom of the page.

CSS code for Footer at the bottom of a page.

Main body page is stretched to a 100% of the page. The footer is then given the below CSS rules

#footer {
clear: both;
position: relative;
z-index: 10;
text-align: center;
height:30px;
}

CSS code for Fixed Footer at the bottom.

There is another approach which will work on all browsers, though it will appear at the bottom, the footer will be placed over the content. As such, the footer will be at the bottom of the window even when you scroll.

#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
z-index: -999;
overflow: hidden;
}