如何将div放置在其容器的底部？
给定以下HTML：
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
我希望#copyright坚持在#container的底部。我可以在不使用绝对定位的情况下实现这一点吗？
回答 26
Stack Overflow用户
发布于 2015-01-07 13:04:24
flexbox方法！
在supported browsers中，您可以使用以下内容：
.parent {
display: flex;
flex-direction: column;
}
.child {
margin-top: auto;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
flex-direction: column;
}
.child {
height: 40px;
width: 100%;
background: #f00;
margin-top: auto;
}<div class="parent">
<div class="child">Align to the bottom</div>
</div>
上面的解决方案可能更灵活，但是，这里有一个替代解决方案：
.parent {
display: flex;
}
.child {
align-self: flex-end;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
}
.child {
height: 40px;
width: 100%;
background: #f00;
align-self: flex-end;
}<div class="parent">
<div class="child">Align to the bottom</div>
</div>
作为附注，您可能希望添加供应商前缀以获得额外的支持。
Stack Overflow用户
发布于 2009-02-08 17:13:26
可能不会。
将position:relative分配给#container，然后将position:absolute; bottom:0;分配给#copyright。
#container {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Stack Overflow用户
发布于 2012-02-01 11:53:16
实际上，@User接受的答案只有在窗口高而内容短的情况下才有效。但是如果内容很高而窗口很短，它会将版权信息放在页面内容上，然后向下滚动查看内容会给您留下一个浮动的版权通知。这使得这个解决方案对大多数页面(实际上就像这个页面)无用。
最常见的方法是演示的"CSS粘性页脚“方法，或者稍微纤细一点的变种。这种方法效果很好--如果你有一个固定高度的页脚。
如果你需要一个可变高度的页脚，如果内容太短，它会出现在窗口的底部，如果窗口太短，会出现在内容的底部，你该怎么办？
放下你的傲慢，用一张桌子。
例如：
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#container {
height: 100%;
border-collapse: collapse;
}<!DOCTYPE html>
<html>
<body>
<table id="container">
<tr>
<td valign="top">
<div id="main">Lorem ipsum, etc.</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="footer">Copyright some evil company...</div>
</td>
</tr>
</table>
</body>
</html>
试一试。这将适用于任何窗口大小，任何数量的内容，任何大小的页脚，在每个浏览器上...甚至是IE6。
如果你对使用表格进行布局的想法感到畏缩，花点时间问问自己为什么。CSS本应让我们的生活更轻松--总的来说确实如此--但事实是，即使这么多年过去了，它仍然是一个破碎的、违反直觉的烂摊子。它不能解决所有问题。是不完整的。
表格并不酷，但至少现在，它们有时是解决设计问题的最好方法。
https://stackoverflow.com/questions/526035
复制相似问题
腾讯云开发者
