Sticky footer (jQuery) won't align to bottom of page exactly
Domanda
The problem:
I'm using jQuery to align my footer to the bottom of a page. It works in FF but IE, Chrome and Safari push the footer down by about 50-100px.
See for yourself:
Look at the footer of www.directsponsor.org to see a live example of the problem.
The code:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
matchHeight();
function matchHeight() {
var mainHeight = $("#wrapper").outerHeight() - $("#header").outerHeight() - $("#leader").outerHeight() - $("#footer").outerHeight() - parseInt($("#footer").css("margin-top")) - 1 - parseInt($("#main").css("padding-top"))- parseInt($("#main").css("padding-bottom"));
var mainReal = $("#main").outerHeight(true);
if ((mainHeight + 1 + parseInt($("#main").css("padding-top")) + parseInt($("#main").css("padding-bottom"))) > mainReal) {
$('#main').height(mainHeight);
}
}
$(window).resize(matchHeight);
});
</script>
My question:
What's causing the footer to sink below the bottom of the page?
Soluzione
try this : http://www.codicode.com/art/the_best_sticky_footer.aspx this code also uses jQuery and works perfectly on all browsers.
hope this helps.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow