html - 一个在底部，另一个在顶部

Question

在另一个 div 中有 2 个 div。第一个 div 必须在顶部，第二个应该在底部。父 div 的高度可能会改变，顶部 div 的高度也可能会改变。知道了这一点，我怎样才能将第二个 block 放在底部？ 所以我有这样的东西:

<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

Live Demo

• 如果您知道父元素的高度始终至少是两个子元素的总和高度，则此方法效果很好。否则，this happens .
• > Read this了解它是如何工作的。

CSS:

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