如何在没有绝对值的情况下将 div 附加到底部？答案

【问题标题】：How to attach div to bottom without absolute?如何在没有绝对值的情况下将 div 附加到底部？
【发布时间】：2013-11-07 02:47:43
【问题描述】：

所以我有一个页脚：

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

在包装器中的样式：

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

所以我需要将页脚 div 附加到浏览器的底部。问题是如果我添加：

position:absolute;
bottom:0;

之前的一些div与footer相交，我也需要自己设置高度和宽度。

【问题讨论】：

您在#page 中有#footer，但您希望它位于HTML 文档的最底部，是吗？
是的，因为如果它在#page 之外，我需要两次来编写相同的属性。我认为这不好...但可能我错了...
您不能提供链接或发布有关 HTML 标记和任何相关 CSS 的更多信息，特别是与 #footer 相交的 #page 和 div 吗？
所有代码都在这里。没有别的了。

标签： html css

【解决方案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 */
}

HTML

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

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

【讨论】：

这个支持响应高度吗？如果内容有很长的段落并假设自动压低容器的高度怎么办。
这是唯一对我有用的技术。我能看到的唯一缺点是必须两次指定页脚高度，但如果您使用的是 CSS 生成器或模板系统，这不是一个大问题。请参阅ryanfait.com/sticky-footer 了解更多信息。

【解决方案2】：

This 并不完全符合您的要求，但它是我使用 position: fixed 所做的类似实现。

对于您想要实现的目标，您需要使用position: absolute 来实现它。然后您将不得不手动给出元素的高度以使其正确适合。而当footer里面有内容的时候，可以用padding来完善造型。

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

【讨论】：

【解决方案3】：

用途：

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

这里有一个很好的 article 来了解 position: 的工作原理

【讨论】：

但是如果正文中存在更多信息，现在会出现滚动...可能在第一篇文章中我描述的问题不正确，因为如果正文中的帖子不多，我需要在浏览器的底部，但如果还有更多，这需要放在最后，但也要坚持浏览器（我默认在div和浏览器行之间有一些像素）。
这根本不是正确的解决方案。你需要使用一种叫做“粘性页脚”的东西。在这里查看一个好的解决方案：ryanfait.com/sticky-footer
他询问如何将元素附加到浏览器视口的底部和位置：fixed 正是这样做的。如果他想要一个“粘性页脚”，正如您所想的那样，那不是问题。
什么也没发生...可能是因为 *{ margin: 0;填充：0；大纲：0； }
这不会影响它，但我建议你试试 Tom 的链接，如果这与你所追求的结果相同