Page Widget How to - Create a Sticky Footer

Question

We would like to know how to create a Sticky Footer.

Answer


<!DOCTYPE html>
<html>
<head>
<style media="all">
html, body {<!--   w  w  w. jav  a2  s  .co m-->
   height: 100%; 
   margin: 0; 
   padding: 0;
}

* html #outer {/* ie6 and under only*/
    height:100%;
}

.wrapper {
    min-height: 100%;
    margin: -240px auto 0;
}

.content {padding-top: 240px;}

.footer {
    height: 240px; 
    background: #EEE;
}

</style>

</head>
<body>
    <div class="wrapper">
        <div class="content">Content</div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

The code above is rendered as follows: