如何使div下浮？

I have 4 divs. One is outer wrapper, and other 3 are header, content and footer respectively. All the are of same(fixed) width. But height of outer wrapper and content div are variable.

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

irrespective of the size of these, i want the footer div to stick at the bottom of outer wrapper. I have tried using the following CSS

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

position: relative;
bottom: 0px;

But it didn't work. Does anybody know a solution?

但它没有用。有人知道解决方案吗？

6 个解决方案

#1

To align a div to bottom, you have to first make the parent div's position relative. then make the required div's position to absolute and set the bottom property to zero.

要将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>

#2

The footer div will need to be either:

页脚div需要是：

position:absolute;bottom:0;; This will push it to the bottom of its container, however, when you scroll down past the container, the footer will scroll with it.

位置：绝对的;底部：0 ;;这将把它推到容器的底部，但是当你向下滚过容器时，页脚会随之滚动。
position:fixed;bottom:0;; This is used more often for sticky footers. This will place the footer at bottom:0 of your screen. so no matter where you scroll, what you see is what you get (it will not move around while scrolling)

位置是：固定;底部：0 ;;这通常用于粘性页脚。这会将页脚放在屏幕底部：0。所以无论你在哪里滚动，你看到的就是你得到的东西（滚动时它不会移动）
position:relative;bottom:0;; could be used, but it will be relative to it's siblings (i.e. unless the content div is pushing it to the bottom, it won't go there), or, I believe if the container is relative then it may work (but please correct me if I'm wrong).

位置：相对;底部：0 ;;可以使用，但它将相对于它的兄弟姐妹（即除非内容div将其推到底部，它不会去那里），或者，我相信如果容器是相对的那么它可能有用（但请更正）我，如果我错了）。

Based on your question: i want the footer div to stick at the bottom of outer wrapper. it sounds like you want to use absolute positioning for the footer, so that it'll always stick to the bottom of its container....

根据你的问题：我希望页脚div粘在外包装的底部。听起来你想要对页脚使用绝对定位，这样它总是会粘在容器的底部......

If you want the footer to stay on the bottom of the screen no matter where the user scrolls to, then I'd recommend fixed positioning.

如果你想让页脚留在屏幕的底部，无论用户滚动到哪里，那么我建议固定定位。

Definitely check out some... tutorials and most importantly, mess around and experiment yourself!

绝对检查一些...教程，最重要的是，搞乱并实验自己！

you can make us a jsfiddle and maybe it'll shed more light on what you're trying to accomplish. good luck!

你可以让我们成为一个小伙伴，也许它会让你更清楚地了解你想要完成的事情。祝你好运！

#3

You can let the wrapper's position is relative and the inner Divs position are absolute.

你可以让包装器的位置是相对的，而内部的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>

Try this http://jsfiddle.net/YAaA3/

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

#4

use a clear to get the footer below the content.

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

simply -

简单 -

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

That should force the header to be on top, and the footer to fall below the floated elements.

这应该强制标题位于顶部，页脚将落在浮动元素下方。

#5

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

#6

[UPDATED]

[更新]

Here is the CSS that always sticks the footer to the bottom.

以下是始终将页脚粘贴到底部的CSS。

*DEMO*

* 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;
}

#1