我如何能定位我的div在其容器的底部?

给定以下HTML:

我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?

当前回答

是的，你可以在没有绝对定位的情况下做到这一点，也可以不使用表(这与标记有关)。

演示这是经过测试的工作在IE>7, chrome, FF &是一个非常容易添加到您现有的布局。

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

它有效地做了浮动:底部会做的事情，甚至解释了@Rick Reilly的回答中指出的问题!

2013-10-01 07:16:53

其他回答

也许这对某些人有帮助:你可以总是把一个div放在另一个div的外面，然后用负边距把它往上推:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

2014-04-03 08:51:59

此外，如果有使用位置的规定:绝对;或者position:relative;，你总是可以尝试填充父div或放置margin-top:x;。在大多数情况下不是一个很好的方法，但在某些情况下可能会派上用场。

2013-05-15 14:50:38

对于容器中只有一个子div的容器，可以使用表格单元格和垂直对齐方法，这种方法可以可靠地将单个div定位在父div的底部。

注意，使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。

#{容器显示:表; 宽度:100%; 身高:200 px; ｝ #{项显示:表格单元; vertical-align:底部; ｝ < div id = "容器" > <div id="item">单个底部项目</div> < / div >

2016-11-16 11:31:39

实际上，@User接受的答案只有在窗口很高而内容很短的情况下才有效。但如果内容很高，窗口很短，它会把版权信息放在页面内容之上，然后向下滚动查看内容，会给你留下一个浮动的版权通知。这使得这个解决方案对于大多数页面(实际上，就像这个页面)毫无用处。

最常见的方法是“CSS粘性页脚”方法，或者是一种更简洁的方法。这种方法非常有效——如果你有一个固定高度的页脚。

如果你需要一个可变高度的页脚，如果内容太短，它会出现在窗口的底部，如果窗口太短，它会出现在内容的底部，你会怎么做?

放下你的骄傲，使用一张桌子。

例如:

* { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; } <!DOCTYPE html> <html> <body> <table id="container"> <tr> <td valign="top"> <div id="main">Lorem ipsum, etc.</div> </td> </tr> <tr> <td valign="bottom"> <div id="footer">Copyright some evil company...</div> </td> </tr> </table> </body> </html>

试试吧。这将适用于任何窗口大小，任何数量的内容，任何大小的页脚，在每个浏览器…甚至IE6。

如果你对使用表格布局的想法感到畏缩，花点时间问问自己为什么。CSS应该让我们的生活更简单——总的来说，它做到了——但事实是，即使经过了这么多年，它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。它是不完整的。

表格并不酷，但至少就目前而言，它们有时是解决设计问题的最佳方法。

2012-02-01 03:53:15

如果你不知道子块的高度:

#{母公司背景:绿色; 宽度:200 px; 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ .child { 背景:红色; vertical-align:底部; ｝ < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >

http://jsbin.com/ULUXIFon/3/edit

如果你知道子块的高度，添加子块，然后添加padding-top/margin-top:

#{母公司背景:绿色; 宽度:200 px; 身高:130 px; padding-top: 70 px; ｝ .child { 背景:红色; vertical-align: 底; 身高:130 px; ｝ < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >

2014-01-06 08:22:34

我如何能定位我的div在其容器的底部?

推荐文章

最新文章

标签