CSS:
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML:
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
Reference URL
Loading ...
Note that this clearfix is the only one with a dot (content: “.”;) instead of a space like in the “Force Element To Self-Clear it’s Children” snippet.
Very neat, I’ll test this in my code.
Note that setting html {height:100%} causes a bug where a bottom-aligned body background image will fail to attach to the real bottom of the body.
Instead it will attach to the bottom of the viewport and scroll up showing ugly space underneath.
The solution is to apply your background to an inner element or maybe your design will work with background-attachment:fixed instead.
Another brilliant bit of code from you Chris, thanks
Note, that sticky footer falls short in Opera and IE8. Open the page in each, have your browser window halfway open, now drag the window down, now see that the footer does not follow. This one works in all… http://www.visibilityinherit.com/code/sticky-footer.php
What is the code that you used for the main menu of snippets?
CSS
HTML
HTAccess
Etc.