css - さまざまな高さでの絶対位置決め

Question

ウィンドウの左端に固定されたサイドバーがあり、ウィンドウの下部にいくつかのスクロール コンテンツが配置されています。通常、スクロール コンテンツのコンテナーtopプロパティをその上のコンテンツの高さに設定すると、すべて問題なく表示されます。

これが私が話していることの例です。そして、より具体的な例

#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

/* and inside sidebar */
#header {
    /* my question is, how do I achieve this effect when this height is 'auto' */
    height: 100px;
}

#scrollable-content {
    top: 100px;
    overflow-y: scroll;
}

スクロール コンテンツの上のコンテンツの高さが固定されていない場合、同じ効果を得ることができますか? JavaScript を導入する必要がありますか? このフィドルを修正して、スクロールするコンテンツの下部を常に表示できるようにするにはどうすればよいですか?