CSS tricks to fix div position at bottom of a HTML page

CSS tricks to fix div position at bottom of a HTML page

Recently I worked for a shopping cart application. In this project for product details page customer wants to show the price & social sharing buttons in footer. During page scroll footer need to fix. Like this in some cases we required to fix div position at bottom of a HTML page. In the below example I am showing how to do this.

Here I have 2 div’s in my html body part. First div contains total html design for the page. 2nd div is the footer. Which follow footer class. To do fix the footer here I used CSS trick. In footer class I declared position: fixed. Then to align it to bottom I did added bottom: 0px; Left & right are optional. You can replace this with width: 100%. Depending upon the footer contents you can set the value for height. To run this demo copy the htm file & open it in your browser.

Fix-DIV-position.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>How to fix footer to the bottom of page?</title>
<style type="text/css">
.footer
{
background-color:#0000FF;
position:fixed;
bottom:0px;
left:0px;
right:0px;
height:50px;
margin-bottom:0px;
}
</style>
</head>
<body>
<div>
This is HTML body.
</div>
<div class="footer">
This is a fixed footer.
</div>
</body>
</html>