粘性页脚（jQuery）不会与页面底部完全对齐

发布于 2024-12-09 08:58:30 字数 1029 浏览 0 评论 0原文

问题：

我使用 jQuery 将页脚与页面底部对齐。它在 FF 中有效，但 IE、Chrome 和 Safari 将页脚向下推约 50-100 像素。

亲自查看：

查看 www.directsponsor.org 的页脚，查看问题的实时示例。

代码：

<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>

我的问题：

是什么导致页脚下沉到页面底部以下？

原文

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>