20

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

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

position: relative;
bottom: 0px;

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

4

6 回答 6

27

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

于 2013-05-04T17:07:38.490 回答
13

页脚 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定位。

一定要看看一些......教程，最重要的是，自己动手做实验！

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

于 2012-12-28T04:45:10.523 回答
7

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

于 2012-12-28T04:15:55.377 回答
2

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

简单地 -

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

这应该迫使页眉位于顶部，而页脚位于浮动元素下方。

于 2012-12-28T04:34:36.217 回答
2 
<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>
于 2013-05-04T18:24:40.387 回答
0

[更新]

这是CSS始终将页脚粘在底部的那个。

*演示*

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;
}
于 2012-12-28T04:33:10.337 回答