如何使div向下浮动？

Question

我有4个div。一个是外包装，另外三个分别是header、content和footer。所有的都是相同(固定)的宽度。但是外包装和内容div的高度是可变的。

不管它们的大小，我想让footer div粘在外包装的底部。我已经尝试使用以下CSS

position: relative;
bottom: 0px;

但它并没有起作用。有谁知道解决方案吗？

Answer 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>

​

Answer 2

footer div需要是以下任一项：

这将把它推到容器的底部，然而，当你向下滚动经过容器时，页脚将随着it.

• position:fixed;bottom:0;；滚动这更常用于粘性页脚。这将把页脚放在屏幕的bottom:0处。所以无论你在哪里滚动，你看到的就是你得到的(当scrolling)

• position:relative;bottom:0;；可以被使用时，它不会到处移动，但它将相对于它的兄弟(例如，除非内容div把它推到底部，它不会放在那里)，或者，我相信如果容器是相对的，那么它可能会工作(但如果我错了，请纠正我)。

根据你的问题：i want the footer div to stick at the bottom of outer wrapper.听起来你想对页脚使用absolute定位，这样它就总是粘在容器的底部……

如果你想让页脚停留在屏幕的底部，不管用户滚动到哪里，那么我推荐fixed定位。

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

您可以为我们创建一个jsfiddle，也许它会让您更清楚地了解您想要实现的目标。祝好运!

Answer 3

您可以让包装器的位置是相对的，而内部Div的位置是绝对的。

<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/