logo标签列表

将页脚强制固定在页面底部

javascriptjquerycss
3

可能是重复问题:
CSS粘性页脚

我正在努力开发一个web服务，但我遇到了一个问题，就是网站的页脚无法保持在页面底部。我已经尝试了所有"粘性页脚"脚本，但似乎都不起作用，这让我感到非常沮丧。

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

亲切的问候：
Nathaniel Blackburn
他似乎在问如何在网页底部制作一个页脚div。代码是隐式的。 - Jeremy Holovacs
+1 个“最好的问候”。在这里看到一些额外的友善真是太棒了。 - Dylan Valade
@nblackburn，这些选项中有任何一个对您有效吗？ - Dylan Valade
5个回答
6
我设计了这个简单的解决方案（在Firefox和Chrome中测试过）。首先，在一个JavaScript文件中定义这个函数：
function footer() {
    if ($(window).height() > $('body').height())
        {
        var extra = $(window).height() - $('body').height();
        $('footer').css('margin-top', extra);
        }
    }

然后，当文档准备好时，使用jQuery简单地调用它。
3

这不是我最喜欢的制作页脚的方法，但我认为您想要使用 "position: fixed"。

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

使用其他方法会遇到这样的问题，例如“关于我们”页面的<body>元素高度不够，导致页脚在页面底部而非窗口底部。你可以增加<body>元素的高度或者将其设置为fixed，这意味着页脚应该相对于浏览器窗口定位。

1
这听起来确实就是他正在寻找的。 - Jeremy Holovacs
2

你尝试过这个CSS吗？

#footer {
    position: absolute;
    bottom: 0;
}
是的，这似乎对我没有起作用。 - user955822
这需要在body元素上设置一个相对位置的容器，并且不会改变层次结构中间的定位。可行，但也取决于页面至少与窗口一样长，就我理解的问题而言。 - Jeremy Holovacs
0
为什么不使用 CSS？
#footer{ position: fixed; left: 1em; right: 1em; bottom: 0em; text-align: center; }

放置一个

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

在具有该CSS的页面上，页脚将会很好地固定。

（尽管有人建议这样做会“搞砸”页面。但是，它将强制将div置于窗口底部，而不管页面的大小如何。如果需要区分浮动和固定之间的某些差别，我可以提供更多上下文信息来说明如何完成此类操作。）

那会搞乱他的页面。他只需要将页脚位置改为绝对定位，然后将宽度设置为100％即可。它有效；我尝试过了。 - nmagerko
抱歉，我希望它固定在底部，而不是浮动在底部。 - user955822
我不太确定你是如何区分这种差异的？你缺少哪些功能？@nmagerko，你认为这会如何破坏他的页面？我经常使用它，从未出现过这种情况。 - Jeremy Holovacs
你的页面不是他的页面。我相信你理解这个概念，每个不同的类都会导致工作技巧发生巨大变化。 - nmagerko
@nmagerko，听着，我并不想刁难你，但是你在说什么呢？一个固定位置的div怎么可能会弄乱页面呢？它会粘在窗口底部，没有其他东西会干扰它。唯一不会发生这种情况的时候是浏览器不支持CSS 2.1。我想要一个解释，说明这会如何“弄乱”某人的页面。给我一个例子，我就不再说了。 - Jeremy Holovacs
我认为这是一个延伸讨论，已经足够了。 - nmagerko
0

我曾经给另一个人提供了类似问题的解决方案：

#wrapper {
    min-height:1200px; //???
    max-height:1200px; //???
    position:relative;
    ....
}
#footer {
    position:absolute;
    bottom:0;
    left:0;
    ....
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接