底部一個塊，頂部另一個

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
}