使div粘贴到另一个div的底部（不是视口的底部）

Question

如何将div粘贴到父div的底部，不一定是视口的底部？我仍然希望将内容放在父div之下。

我希望通过跨浏览器兼容性来做到这一点，如果可能的话，不要使用JS。

Answer 1

了解css位置：http://www.w3schools.com/css/css_positioning.asp

基本上，您可以在具有位置相对性的父级内的任何位置放置具有绝对值的div。

.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: 0;
}

Answer 2

简单，使用flexbox

此处示例http://codepen.io/anon/pen/RWGvJR

您使用

display: flex;

在容器上。 您将要填充空间的元素设置为

flex-grow: 1;

希望有所帮助。没有JS高度兼容（flexbox）。

Answer 3

将页脚（或div）置于绝对高度，固定高度。使容器填充等于页脚的高度。

小提琴：overloading methods in Java here

HTML

<div class="container">
    <footer>bottom content</footer>
</div>
<p>additional content</p>

CSS

.container {
    height: 500px;
    border: 1px solid;
    position: relative;
    padding-bottom: 50px;
}
.container footer {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #eee;
}