Question

我花了很多时间尝试使用CSS将我的页脚粘贴到页面的底部，并且几乎放弃了。

如果视口的高度小于HTML文档的高度，我想要的是页脚没有分配额外的CSS属性。

如果文档高度小于窗口高度，我希望将以下CSS分配给div #thefooter：

position: fixed;
bottom: 0px;
margin-left: -5px;

所以这是我的JS代码。它什么都不做，控制台日志没有显示任何内容。

$(document).ready(function(){

  $(window).bind("load", function(){ putFooter(); });
  $(window).resize(function(){ putFooter(); });

  function putFooter(){
    var wh = $(window).height();
    var dh = $(document).height();
    if(dh < wh) {
      $("#thefooter").css({"position": "fixed", "bottom": "0px", "margin-left": "-5px"});
      }
    }

});

编辑：这就是我的HTML的样子：

<div id="allexceptfooter">
  <div id="themenu">...</div>
  <div id="actualcontent">...</div>
</div>
<div id="thefooter">...</div>

如果你想看到整个网站是duncannz .com

Answer 1

检查一下，根本不需要javascript ...

http://www.cssstickyfooter.com

Answer 2

好的我已经知道了。不是用CSS - 我已经花了很多时间尝试。

但我有jQuery工作。问题是$(document).height();正在返回视口的高度，因为我在CSS中使用了body{ height: 100%; }。答案是使用这个HTML：

<body>
<div id="everything">
...
</div>
</body>

并使用$("#everything").height();代替$(document).height();。遗憾的是仍然需要JS，但总比没有好。没有CSS解决方案适合我。

再次编辑：这是重新更新的代码：

$(document).ready(function(){

  function putFooter(){
    var wh = $(window).height();
    var dh = $("#everything").height();
    if(dh < wh - 104) { /*104: #thefooter height in px*/
      $("#thefooter").addClass("footerissticky");
      }
    else {
      $("#thefooter").removeClass("footerissticky");
      }
    }

  putFooter();
  $(window).bind("load", function(){ putFooter(); });
  $(window).resize(function(){ putFooter(); });

});

和CSS：

.footerissticky{
  position: fixed;
  bottom: 0px;
  width: 870px;
}

Answer 3

您可以使用此技术完全避免使用Javascript：

http://ryanfait.com/sticky-footer/

Answer 4

JQuery添加了 data-position =＆＃34; fixed＆＃34; 来解决这个问题。回答 - jQuery Mobile: Stick footer to bottom of page

jQuery将页脚粘贴到页面底部

4 个答案: