如何使div下浮？

Question

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

无论这些大小如何,我都希望页脚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

在页脚DIV将需要两种:

• position:absolute;bottom:0;; 这将把它推到容器的底部,但是当你向下滚过容器时,页脚会随之滚动.

• position:fixed;bottom:0;; 这通常用于粘性页脚.这会将页脚放在bottom:0屏幕上.所以无论你在哪里滚动,你看到的就是你得到的东西(滚动时它不会移动)

• position:relative;bottom:0;; 可以使用,但它将相对于它的兄弟姐妹(即除非内容div将其推到底部,它不会去那里),或者,我相信如果容器是相对的那么它可能有用(但请更正)我,如果我错了).

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

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

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

你可以让我们成为一个小伙子,也许它会更多地阐明你想要完成的事情.祝好运!

Answer 3

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