底部一个块，顶部另一个

Question

另一个div内部有2个div。 第一个div必须在顶部，第二个div应该在底部。 父div的高度可能会更改，顶部div的高度也可能会更改。 知道这一点后，如何将第二个块定位在底部？ 所以我有这样的事情：

<div id="parentdiv">
<div id="div1" style="width:100px;height:100px;">top div</div>
<div id="div2" style="width:100px;height:100px;">bottom div</div>
</div>

但是parentdiv的高度可能会发生变化，并且div2必须保持在底部。

Answer 1

现场演示

• 如果您知道父级的高度将始终至少为两个子元素组合的高度，则此方法效果很好。 否则， 会发生这种情况 。
• 阅读本文以了解其工作原理。

CSS：

#parentdiv {
    position: relative;
    height: 300px;
    background: #ccc
}
#div1, #div2 {
    position: absolute;
    left: 0;
    outline: 1px solid red
}
#div1 {
    top: 0
}
#div2 {
    bottom: 0
}