给定以下HTML:

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

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


当前回答

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

#{母公司 背景:绿色; 宽度: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 >

其他回答

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

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

代码依赖链接在这里。

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>

正因为这一点根本没有被提及,在你这种情况下通常有效的方法是:

将copyright-div放在container-div之后

您只需要以与其他容器类似的方式格式化copyright-div(相同的整体宽度、居中等),就可以了。

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

唯一不理想的情况是当container-div声明高度为:100%时,用户需要向下滚动以查看版权。但即使如此,你仍然可以修改(例如margin-top:-20px -当你的版权元素的高度是20px)。

没有绝对定位 没有表格布局 没有疯狂的css,其他浏览器看起来都不一样(至少IE是这样) 简单明了的格式

旁白:我知道OP要求的解决方案是“……粘在“容器”div的底部…”,而不是下面的东西,但拜托,人们在这里寻找好的解决方案,这就是一个!

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

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

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