jquery - 仅当页面为 "short"时才将页脚放在底部

Question

我有一个包含多个页面的网站。每个页面都有不同的高度(很明显，但我提到了)。

我想要实现的是，如果页面内容低于浏览器视口(viewport)，页脚标签将获得固定位置并与页面底部对齐。

我试过这个 js:

$(function(){
if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
}
});

$(window).resize(function() {
    if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
});

和那个CSS:

.fixbottom {
    width: 100%;
    position: fixed;
    bottom: 0;
}


footer {
height:44px;
    background: #7abde9;
    color: #ffffff;
    text-align: center;
}

我的 jquery 中的 top+44 是因为我的页脚标签是 44 高度 iv'使用文档就绪和窗口调整大小来确保满足所有情况，但不幸的是，这似乎在任何情况下都不起作用。

非常感谢任何帮助

Answer 1

你不需要javascript。

有一种名为“stickyfooter”的方法，它提供了一种方法，即使内容不多，也能始终将页脚放在底部。

这是一个简单的例子:

html, body {
    height:100%;
}

#wrapper {
    position: relative;
    min-height:100%;
}

#main {
    padding-bottom: 44px;
}

footer {
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

查看此 fiddle看看它是如何工作的。