如何在不使用绝对定位的情况下将 div 定位到底部？

Question

所以我有一个页脚：

<div id="footer" >
    <div style="padding:20px;">
        Footer
    </div>
</div>

这是一个带有样式的容器：

#page { width:964px; margin:0 auto; }

我需要将页脚div固定在浏览器底部。问题是，如果我添加：

position:absolute;
bottom:0;

以前的某些 div 与页脚相交，我需要自己设置高度和宽度。

- NoNameZ

---

你把 #footer 放在了 #page 里面，但是你想让它出现在 HTML 文档的最底部，是这样吗？ - Zuul

是的，因为如果它在 #page 外面，我需要两次编写相同的属性。我认为这不好...但也许我错了... - NoNameZ

你能否提供关于HTML标记和相关CSS的链接或更多信息，特别是针对#page和与#footer相交的div？ - Zuul

所有的代码都在这里。没有别的。 - NoNameZ

Answer 1

尝试这样做...

CSS样式表：

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

The HTML

<div class="wrapper">
    <p>wrapper text here</p>    
    <div class="push"></div>
</div>

<div class="footer">
    <p>footer text here.</p>
</div>

- CSS Guy

---

这个支持响应式高度吗？如果内容有长段落并且应该自动推下容器的高度，会怎么样？ - user2734550

这是唯一对我有效的技术。唯一的缺点就是需要两次指定页脚高度，但如果您使用CSS生成器或模板系统，则不是什么大问题。请参阅http://ryanfait.com/sticky-footer/获取更多信息。 - Zack Morris

Answer 2

这不完全是你要求的，但这是我使用position: fixed实现的类似方案。

为了实现你想要的效果，你需要使用position: absolute。然后你需要手动设置元素的高度以使其适合页面。当你在footer中添加内容时，可以使用padding来完善形状。

这些是唯一可能的选项。要么选择fixed定位，要么选择absolute定位。

- Aniket

Answer 3

使用：

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

这里有一篇很好的 文章，可以帮助理解 position: 是如何工作的。

- Luca

---

这并不是正确的解决方案。你需要使用一个叫做“粘性页脚”的东西。在这里可以找到一个好的解决方案：http://ryanfait.com/sticky-footer - Tom

他问如何将一个元素附加到浏览器视口底部，而position: fixed正好可以做到这一点。如果他想要一个“粘性页脚”，就像你所猜测的那样，这并不在问题中。 - Luca

什么都没有发生...可能是因为*{ margin: 0; padding: 0; outline: 0; }的原因。 - NoNameZ

当页面高度超过浏览器的高度时，这会将页脚放置在内容上方（贴着浏览器底部）。 - Gaʀʀʏ

@Gaʀʀʏ 是的，但这是预期的行为，因为定位元素被拿出了DOM流 - 这意味着它们不像具有“静态”位置（默认值）的元素那样占用空间; 通常的做法是在包装器上设置一些 margin-bottom 或 padding-bottom 以避免内容被“覆盖”在页脚下面 - 设置一个等于或大于页脚高度的值。 - Luca