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

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

如果可能的话，我希望通过跨浏览器兼容性和无JS来实现这一点。

简单，使用flexbox

这里的例子

你用

display: flex;

在集装箱上。 将要填充空间的元素设置为

flex-grow: 1;

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

将页脚（或div）定位为绝对高度，并具有固定高度。使容器填充等于页脚的高度

小提琴：

html

---

了解css位置：

基本上，您可以在具有相对位置的父级中的任意位置放置带有绝对值的div

.parent {
    position: relative;
}

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

---

这适用于较旧的浏览器吗？它看起来很新：不适用于ie9或以下版本。它目前有大约80%的全球兼容性：是的，ie9是1.14%，ie8是1.45%的用户，flexbox的部分支持率也是94%，这涵盖了这个场景。我不希望这成为一个页脚。我想要div下面的内容。绝对不会让它粘到视口的底部吗？它会粘到最近的“位置：相对”父对象的底部。这就是为什么.container有“position:relative”。您仍然可以毫无问题地将内容放在容器下面。我来更新一下：我只是因为讨厌那些无缘无故地投反对票的人才投了赞成票。

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

.parent {
    position: relative;
}

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