There are quite a few queries regarding Ryan Fait's sticky footer, but I urge you not to dismiss this one immediately! My goal is to have a footer with a dynamically sized height that sticks to the bottom of the page.
Ryan Fait suggests wrapping all page content in #wrapper and setting the margin-bottom of #wrapper to match the height of the footer. While this technique works when the height is hardcoded in the CSS, I am unsure of the exact size of my footer. Therefore, I aim to use JavaScript to set #wrapper's margin-bottom. However, my attempts so far have been unsuccessful. You can view my setup here.
I have spent so much time on this puzzle that I'm running out of hair to pull. Can you spot where I might be going wrong?
The Code on JSFiddle
HTML
<body>
<div id="wrapper">
Wrapper
</div> <!-- #wrapper -->
<footer>
Footer
</footer>
</body>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto; /* Negative margin set with JS */
}
footer {
height: 100px;
}
JQuery
$(window).load(function() {
set_window_bottom_margin();
});
function set_window_bottom_margin() {
var margin = $('footer').outerHeight(true);
$('.wrapper').css('margin-bottom', margin * -1 + 'px');
}