css-float - 浮动页脚始终位于底部且可见

Question

我有一个这样的网站：>> website <<。它由 2 个框架构成 - 主框架和页脚。我试图让它在没有框架的情况下工作（不要在手机上工作）。是否有任何简单的 CSS 或 jQuery 方法可以将页脚粘贴在底部以始终可见？所以效果就像上面的网站？我试图使用 css，但只有当我向下滚动到它时才会出现页脚。我希望页脚覆盖实际内容，所以它总是例如 50 像素高，并且总是在屏幕底部可见。即使页面是 10000px 高。我相信这很简单，但我在某个地方迷路了。提前谢谢你的帮助

Answer 1

是的。是position: fixed财产。

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

演示：http: //jsfiddle.net/ZsnuZ/

Answer 2

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

Answer 3

继续山姆琼斯：

基本上这会检查文档的高度是否会填满窗口，如果它小于窗口，它将附加到窗口的底部，如果文档大于窗口大小，它将附加到窗口的底部文档（因此它仅在您滚动到底部时可见）。

如果您调整窗口大小，它将重新计算并且一切都应该正常工作！

CSS

#footer {
  bottom: 0px;
}

HTML

<div id="footer">
  Footer content
</div>
<script>
  var footerResize = function() {
    $('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
  };
  $(window).resize(footerResize).ready(footerResize);
</script>

Answer 4

我们甚至可以使用下面的代码比较高度并将页脚设置在底部。

 $(document).ready(function(){
    if($("body").height() < $(window).innerHeight()) {
                    $('#footer').css('position','fixed');
                    $('#footer').css('bottom',0);
    }
 });

Answer 5

对我来说这效果更好，因为当位置为静态或继承时，身体高度包括页脚：

   var footerResize = function() {
            if ($('#footer').css('position') == "fixed")
                $('#footer').css('position', $("body").height() + $("#footer").height() > $(window).innerHeight() ? "inherit" : "fixed");
            else
                $('#footer').css('position', $("body").height() > $(window).innerHeight() ? "inherit" : "fixed");

};

现在增长窗口时它保持在底部。