灵活的方法!

在受支持的浏览器中，您可以使用以下方法:

例子

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; flex-direction:列; ｝ .child { 高度:40像素; 宽度:100%; 背景:# f00; margin-top:汽车; } < div class = "父" > <div class="child">对齐到底部</div> < / div >

上面的解决方案可能更灵活，但是，这里有一个替代方案:

例子

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; ｝ .child { 高度:40像素; 宽度:100%; 背景:# f00; align-self: flex-end; ｝ < div class = "父" > <div class="child">对齐到底部</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的回答中指出的问题!

CSS网格

由于CSS Grid的使用正在增加，我想建议align-self到网格容器内的元素。

Align-self可以包含任何值:end, self-end, flex-end，如下例所示。

#{母公司 显示:网格; ｝ # child1 { align-self:结束; ｝ /*额外的样式片段*/ #{母公司 身高:150 px; 背景:# 5548 b0; 颜色:# fff; 填充:10 px; 字体类型:无衬线; ｝ # child1 { 高度:50 px; 宽度:50 px; 背景:# 6 a67ce; text-align:中心; vertical-align:中间; 行高:50 px; ｝ < div id = "父" > <！——这里的其他元素——> " child1 " < div id = > 1 < / div > < / div >

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

试试这个;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</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的底部…”，而不是下面的东西，但拜托，人们在这里寻找好的解决方案，这就是一个!