Are you a web developer struggling to stick a footer to the bottom of the page? Well, this post is for you!
This solution is working on top known browsers, including Google Chrome, Mozilla Firefox, Safari, Opera and also IE (versions 7, 8 and 9).
Just follow the next HTML structure and CSS rules to stick your footer.
HTML structure:
<div id="all">
<div id="container"></div>
</div>
<div id="footer"></div>
CSS rules:
html, body {
height: 100%;
}
#all{
min-height: 100%;
}
#
container {
overflow:auto;
padding-bottom: 250px;
}
#footer {
position: relative;
margin-top: -250px;
height: 250px;
clear:both;
}
Apply this Fix for Opera:
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
Include this conditional style in the <head> of your HTML file to have support for IE 6 and lower and 8+:
<!--[if !IE 7]>
<style type="text/css">
#all {
display:table;
height:100%
}
</style>
<![endif]-->
For more information, please visit CSS Sticky Footer.
No comments:
Post a Comment