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

继续Sam Jones：

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

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

<强> 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");

};

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

浮动页脚总是在底部并且可见

5 个答案: