纯CSS，没有绝对定位，没有固定高度，跨浏览器(IE9+)

看看那个工作小提琴

因为正常的流程是“从上到下”，我们不能简单地要求#copyright div粘到他的父端的底部而没有某种绝对的定位，但如果我们想要#copyright div粘到他的父端的顶部，这将是非常简单的-因为这是正常的流程方式。

所以我们要利用这一点。 我们将改变div在HTML中的顺序，现在#copyright div在顶部，内容紧随其后。 我们还让内容div一直延伸(使用伪元素和清除技术)

现在只需要将视图中的顺序颠倒过来。这可以很容易地用CSS转换。

我们把容器旋转180度，现在:向上就是向下。(我们将内容反向，使其看起来正常)

如果我们想在内容区域内有一个滚动条，我们需要应用更多的CSS魔法。如图所示[在这个例子中，内容在标题下面-但它的想法是一样的]

* { margin: 0; padding: 0; } html, body, #Container { height: 100%; color: white; } #Container:before { content: ''; height: 100%; float: left; } #Copyright { background-color: green; } #Stretch { background-color: blue; } #Stretch:after { content: ''; display: block; clear: both; } #Container, #Container>div { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotate(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } <div id="Container"> <div id="Copyright"> Copyright Foo web designs </div> <div id="Stretch"> <!-- Other elements here --> <div>Element 1</div> <div>Element 2</div> </div> </div>

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

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

灵活的方法!

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

例子

.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 >

作为旁注，您可能希望添加供应商前缀以获得额外支持。

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

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

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

如果您使用内联块元素的文本对齐特性知道#容器的高度，您确实可以在不使用position:absolute的情况下将方框对齐到底部。

在这里你可以看到它的行动。

这是代码:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

可能不是。

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

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