如果文档高度小于窗口高度，则强制页脚到页面底部答案

【问题标题】：Forcing footer to bottom of page, if document height is smaller than window height如果文档高度小于窗口高度，则强制页脚到页面底部
【发布时间】：2014-05-30 12:16:37
【问题描述】：

我正在修复我的网站在 ipad 纵向模式下的显示。问题是页面长度没有 ipad 的纵向显示那么长。这是我正在谈论的图片：

我创建了一个 jQuery 函数，我认为它会检测文档高度何时不如窗口高度大，然后我可以将页脚的位置设置为固定。这是我的代码：

if ($(document).height() < $(window).height()) {
    $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;');
}

当前的 CSS：

#footer-wrapper {
    padding: 20px 0px 23px;
    background-color: #E3E9DC;
    border-bottom: 3px solid #007897;
    border-top: 3px solid #007897;
    color: #585858;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    #footer-wrapper {
        /*padding: 20px 0px 23px;*/
        background-color: #E3E9DC;
        border-bottom: 3px solid #007897;
        border-top: 3px solid #007897;
        color: #585858;
        position: relative;
        margin-bottom: -65px!important;
        width: 100%;
        text-align: center;
    }
}

我认为这可行，但由于某种原因，文档说它的高度大于窗口视口，因此不执行 if 语句。有谁知道实现这一目标的更可靠方法？

【问题讨论】：

这就是所谓的“粘性页脚”，您可以单独使用 CSS 来实现。例如。 pmob.co.uk/temp/sticky-footer-auto-height.htm
我知道它被称为粘性页脚，但我不希望它始终保持粘性或固定在底部。我只希望它在整个没有到达页面底部时启动（如 ipad 图片所示）。该网站在其他所有方面看起来都很棒。
简单的替代方法（也是我的偏好）是使正文背景与页脚颜色相同。（您只需明确设置任何其他内容区域背景，例如当您有一个白色内容区域时）。

标签： jquery css ipad footer

【解决方案1】：

只需将 javascript 更改为：

if ($(document.body).height() < $(window).height()) {
  $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;');
}

【讨论】：

【解决方案2】：

不幸的是，身高可以设置为 100%。这是仅处理页脚的解决方案

$(window).on('load resize scroll', function() {
    var f = $('#footer-wrapper');
    f.css({position:'static'});
    if (f.offset().top + f.height() < $(window).height()) {
        f.css({position:'fixed', bottom:'0', width:'100%'});
    }
});

【讨论】：