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;;对于 sticky 页脚，这种情况更常用。这会将页脚放在屏幕的bottom:0处。所以无论你在哪里滚动，你看到的就是你得到的东西（滚动时它不会移动）
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

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

Answer 4

使用clear将页脚放在内容下方。

简单 -

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

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

Answer 5

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

Answer 6

[<强>已更新

以下是<{>始终将页脚粘贴到底部的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;
}

如何使div下浮？

6 个答案: