Question

可能重复：
CSS sticky footer

我正在努力开发一个网络服务，但我遇到了一个问题，让网站页脚停留在页面的底部，并开始变得沮丧，因为我已经尝试了他们的每一个“粘性页脚”脚本和似乎没有工作。

#footer {
background:#212121 url(../images/footer.jpg) repeat-x;
height:50px;
position:absolute;
width:100%;
overflow:hidden;
}

亲切的问候，
纳撒尼尔布莱克本

Answer 1

我设计了这个简单的解决方案（在Firefox和Chrome中测试过）。首先在javascript文件中定义此函数：

function footer() {
    if ($(window).height() > $('body').height())
        {
        var extra = $(window).height() - $('body').height();
        $('footer').css('margin-top', extra);
        }
    }

然后在文档准备就绪时使用jQuery调用它。

Answer 2

这不是我最喜欢的页脚方式，但我认为你正在寻找位置：固定。

 #footer {
      background: #212121 url(../images/footer.jpg) repeat-x;
      bottom: 0;
      height: 50px;
      overflow: hidden;
      position: fixed;
      width: 100%; }

所有其他方法遇到的问题是，关于我们这样的页面的<body>页面不像浏览器窗口那么高，因此页脚位于页面底部但不是窗口。您可以进行一些更改以使body元素更高，或者只使用fixed，这意味着页脚应相对于浏览器窗口定位。

Answer 3

你试过这个CSS吗？

#footer {
    position: absolute;
    bottom: 0;
}

Answer 4

为什么不使用CSS？

#footer{ position: fixed; left: 1em; right: 1em; bottom: 0em; text-align: center; }

放一个

<div id="footer">footer stuff</div>

在带有css的页面上，页脚会很好。

（尽管有相反的建议，这不会“弄乱”一个页面。无论页面的大小如何，它都会强制div到窗口的底部。如果在<之间有一些区别< em>浮动和坚持，我可以提供更多关于如何完成此类事情的背景。）

Answer 5

我已经在一个非常类似的问题上向其他人提供了这个解决方案：

#wrapper {
    min-height:1200px; //???
    max-height:1200px; //???
    position:relative;
    ....
}
#footer {
    position:absolute;
    bottom:0;
    left:0;
    ....
}

强制页脚到页面底部

5 个答案: