如何让 div 向下浮动？答案

【问题标题】：how to make a div to float down?如何让 div 向下浮动？
【发布时间】：2012-12-13 10:02:50
【问题描述】：

我有 4 个 div。一个是外包装，另外三个分别是页眉、内容和页脚。所有都是相同（固定）的宽度。但是外包装和内容 div 的高度是可变的。

无论这些大小如何，我都希望页脚 div 贴在外包装的底部。我尝试过使用以下 CSS

position: relative;
bottom: 0px;

但它没有用。有人知道解决办法吗？

【问题讨论】：

你用的是什么浏览器？你能给我们看一个示例页面吗？（可能在JSFiddle 上？）
那个 CSS sn-p 是说，“将底部边框 0x 远离（相对于）通常的位置。”
无论wrapper div 的高度如何，您是否希望footer div 低于content div，或者您是否希望footer 粘在底部wrapper div 不考虑高度或content div？只想知道wrapper div 的高度是否可以大于header + content + footer div 的高度？
2 个类似问题：stackoverflow.com/questions/526035/… 和 stackoverflow.com/questions/311990/…

标签： css html alignment positioning

【解决方案1】：

要将 div 与底部对齐，首先必须将父 div 的位置设为相对，然后将所需 div 的位置设为绝对并将bottom 属性设置为零。

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>

【讨论】：

您的意思是“将所需 div 的位置设为绝对位置”，因为您是在代码块中编写的？

【解决方案2】：

<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>

【讨论】：

【解决方案3】：

页脚 div 需要是：

position:absolute;bottom:0;;这会将其推到其容器的底部，但是，当您向下滚动经过容器时，页脚将随之滚动。
position:fixed;bottom:0;;这更常用于 sticky 页脚。这会将页脚放置在屏幕的bottom:0。所以无论你滚动到哪里，所见即所得（滚动时它不会四处移动）
position:relative;bottom:0;;可以使用，但它将相对于它的兄弟姐妹（即除非 content div 将其推到底部，否则它不会去那里），或者，我相信容器是否是相对的它可能有效（但如果我错了，请纠正我）。

根据您的问题：i want the footer div to stick at the bottom of outer wrapper. 听起来您想为页脚使用absolute 定位，以便它始终粘在其容器的底部......

如果您希望页脚保持在屏幕底部无论用户滚动到哪里，那么我建议使用fixed 定位。

一定要看看some... tutorials，最重要的是mess around and experiment yourself!

您可以让我们成为jsfiddle，也许它会更清楚地说明您想要完成的工作。祝你好运！

【讨论】：

这是一篇内容丰富的帖子。我觉得这应该是公认的。

【解决方案4】：

[更新]

这里是CSS，总是将页脚粘贴到底部。

*DEMO*

CSS-

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#ou {
    position:relative;
    background-color:grey;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:400px;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#he
{
    height:30px;
    background-color:red;
}
#fo{
    background-color:yellow;
    height: 30px; /* .push must be the same height as .footer */
    position:relative;
    width:400px;
    margin:0 auto;
}

【讨论】：

你很接近。这个答案有问题。如果内容很长，那么绝对定位的页脚将在content div 上方。要解决此问题，您可以将 padding-bottom: 35px; 添加到 content div，这样您就不会得到页脚重叠。
@sarcastyx：用解决方案更新答案应该可以完美运行。

【解决方案5】：

使用 clear 来获取内容下方的页脚。

简单——

#header {
 clear:both;
}
#footer {
 clear: both;
}

这应该会强制页眉位于顶部，而页脚位于浮动元素下方。

【讨论】：

【解决方案6】：

你可以让wrapper的位置是相对的，内部Divs的位置是绝对的。

<div style="position: relative; height: 200px">
    <div style="position: absolute; top: 0px; height: 20px; background-color:red">
        header
    </div>

    <div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
        content
    </div>

    <div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
        footer
    </div>
</div>

试试这个http://jsfiddle.net/YAaA3/

【讨论】：