Bottom page footer html design in simple css

Here is the html and css design to keep the html footer at bottom in a web view.

Here is the description of the css, we have use the Footer Height as a variable and there is a wrapping element 'content' class that holds everything except the footer. It had a negative margin equal to the height of the footer. Also note we have added padding-bottom to the content as to ensure that negative margin do not pull up the footer and cover any content area.

.content {
 margin: 0 auto ([-Footer Height]);
 background-color: yellow;
 padding-bottom: [Footer Height];
}
.footer { /*new changes*/
 position: absolute; 
 left: 0 ; right: 0; bottom: 0; 
 height:[Footer Height];
 background-color: blue;
}

Add the following html defining body content and a footer.

<div class="content">

<h2>Sticky Bottom Footer in Simple CSS</h2>
 <p>Show Content</p>
 <img src="imagepath" />


 </div>
 <footer class="footer"> Bottom Footer </footer>
 

Add the css styles

html { height: 100%; }

body {
 font-family: Arial, Helvetica, sans-serif;
 min-height:100%; 
 position:relative; 
}
.content {
 margin: 0 auto -72px;
 background-color: yellow;
 padding-bottom: 72px;
}
.footer { /*new changes*/
 position: absolute; 
 left: 0 ; right: 0; bottom: 0; 
 height:72px;
 background-color: blue;
}