jQuery：粘贴页脚有时需要调整窗口大小才能工作答案

【问题标题】：jQuery: sticking footer needs window resize to work sometimesjQuery：粘贴页脚有时需要调整窗口大小才能工作
【发布时间】：2013-07-28 02:00:12
【问题描述】：

我使用简单的jQuery plugin 将页脚粘贴到页面底部，它工作正常，除非我在页面中放置表格：但是当我调整页面大小时，它会被固定并且页脚会粘在底部。它出什么问题了？是 CSS 相关问题还是 jQuery 问题？

您可以查看没有表格here的页面和有表格here的页面。

这是在页面底部粘贴页脚的jQuery脚本：

$(document).ready(function () {
    positionFooter();

    $(window)
        .scroll(positionFooter)
        .resize(positionFooter);

    function positionFooter() {
        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
        if (docHeight < $(window).height()) {
            var diff = $(window).height() - docHeight;
            if (!$("#sticky-footer-push").length > 0) {
                $("#footer").before('<div id="sticky-footer-push"></div>');
            }
            $("#sticky-footer-push").height(diff);
        }
    }
});

$(window).load(function () {
    $("#footer").stickyFooter();
});

// sticky footer plugin
(function ($) {
    var footer;

    $.fn.extend({
        stickyFooter: function (options) {
            footer = this;

            positionFooter();

            $(window)
                .scroll(positionFooter)
                .resize(positionFooter);

            function positionFooter() {
                var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                if (docHeight < $(window).height()) {
                    var diff = $(window).height() - docHeight;
                    if (!$("#sticky-footer-push").length > 0) {
                        $(footer).before('<div id="sticky-footer-push"></div>');
                    }
                    $("#sticky-footer-push").height(diff);
                }
            }
        }
    });
})(jQuery);

【问题讨论】：

标签： jquery sticky-footer

【解决方案1】：

在内容 div 正下方添加以下行：

<div class="clear"></div>

CSS：

.clear {
    clear:both;
}

您的代码如下所示：

<div id="content">
    //HERE is your table
    <hr />
    <p>categories:</p>
</div>
<div class="clear"></div>

【讨论】：

谢谢，但为什么会发生，您是如何知道解决方案的？
发生这种情况是因为有时 div 必须清晰，以便在此之后开始下一个 div。以及丰富的 jquery 使用经验，这就是为什么我能快速发现您的问题并为您提供解决方案。

【解决方案2】：

可能是 CSS 问题而不是 jQuery 问题... 尝试将此 CSS 添加到您的样式表（未经测试）：

html, body
{
    min-height: 100%;
}

【讨论】：