0

我花了很长时间尝试使用 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

4

4 回答 4

5

看看这个，根本不需要javascript...

http://www.cssstickyfooter.com

于 2012-06-09T21:22:37.157 回答
1

好的，我知道了。不使用 CSS - 我已经花了很长时间尝试使用它。

但我有 jQuery 工作。问题是$(document).height();返回视口的高度，因为我body{ height: 100%; }在我的 CSS 中使用。答案是使用这个 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;
}
于 2012-06-10T02:29:05.370 回答
0

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

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

于 2012-06-09T21:23:39.607 回答
0

JQuery 添加了data-position="fixed"来解决这个问题。已回答 - jQuery Mobile：将页脚粘贴到页面底部

于 2014-08-18T20:40:24.717 回答