html - CSS を使用し Javascript を使用せずに div を展開する

Question

Javascript を使用して必要な高さを計算することなく、親コンテナーに残っているスペースを埋めるために DIV を拡張する方法はありますか?

<div class="parent" style="height: 100%">
    <div class="child-top">
    </div>

    <div class="child-bottom" style="position: relative;">
    </div>
</div>

.parent画面全体を占めるサイドバーです。.child-top高さはコンテンツによって異なる場合があります.child-bottom。他の要素を正しく配置できるように、相対的な位置で残りのスペースを占有したいと考えています。

更新:どの要素でも固定高さを使用できません。.child-top明らかな理由で、.child-bottom高さが親を超えたときにスクロールバーを持つ要素があります。