使用translateY和top属性

只需将子元素设置为position: relative，然后将其移动到顶部:100%(这是父元素的100%高度)，并通过transform: translateY(-100%)(这是子元素高度的-100%)坚持到父元素的底部。

好处

您不需要从页面流中获取元素 它是动态的

但仍然需要变通:(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

不要忘记旧浏览器的前缀。

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

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

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

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

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

虽然这里提供的答案似乎都不适用于我的特定情况，但我看到了一篇文章，它提供了一个简洁的解决方案:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

我发现它非常有用，适用于移动显示的响应式设计，而不必重新排序网站的所有html代码，将主体本身设置为一个表。

请注意，只有第一个表脚-组或表头-组会被这样呈现:如果有多个表脚-组，其他的将被这样呈现。

CSS中没有所谓的float:bottom。最好的方法是在这种情况下使用定位:

position:absolute;
bottom:0;

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

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