给定以下HTML:

< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

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


当前回答

如果你想让它“粘”在底部,不管容器的高度如何,那么绝对定位是要走的路。当然,如果版权元素是容器中的最后一个,它将始终位于底部。

你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?

其他回答

也许这对某些人有帮助:你可以总是把一个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>

代码依赖链接在这里。

html, body { width: 100%; height: 100%; } .overlay { min-height: 100%; position: relative; } .container { width: 900px; position: relative; padding-bottom: 50px; } .height { width: 900px; height: 50px; } .footer { width: 900px; height: 50px; position: absolute; bottom: 0; } <div class="overlay"> <div class="container"> <div class="height"> content </div> </div> <div class="footer"> footer </div> </div>

可能不是。

指定位置:相对于#容器,然后position:绝对;底部:0;#版权。


#{容器 位置:相对; } #{版权 位置:绝对的; 底部:0; } < div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

#{容器宽度:100%;浮:左;位置:相对;} #{版权:绝对;底部:0 px;左:0 px;背景:# F00;宽度:100%;} #容器{背景:灰色;身高:100 px;} < div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

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

演示 这是经过测试的工作在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的回答中指出的问题!