HTML5 / CSS3で次のことをしたいと思います（完全なブラウザー準拠は素晴らしいですが、完全に必要というわけではありません-これまでにFirefox 4b12、Safari、およびChromeでテストしています）：
私は次のhtml構造を持っています：
<div id=contentwrapper>
<aside>
<div id=child1></div>
<div id=child2></div>
</aside>
(<div id=maincontent></div>)
</div>
私がやりたいことは次のとおりです。
contentwrapperは、位置が固定され、上20、下20pxに設定されます（=固定ヘッダーとフッターの間のすべてのスペースを使用します）。
脇は100％の高さに設定されています（コンテンツラッパーのすべてのスペースを使用してください！）
child1には可変コンテンツ（ユーザー操作によるCSSまたはDOM操作によって変更される可能性があります）があるため、高さはautoに設定され、それに応じて高さが調整されます。
child2にも可変コンテンツがあります。しかし、私はこのdivに、脇に残され、child1によって占有されていない利用可能なすべての垂直スペースを使用するようにします。コンテンツにさらに多くのスペースが必要な場合は、必要に応じてスクロールバーを作成するためのoverflow：autoがあります。
列全体の後に、右に浮かぶメインコンテンツ領域が続きます。しかし、これは私の問題には関係がないはずです。
私がこれまでに試したこと：
child2の高さをautoまたは100％または固定値に設定できません（大きくなる可能性があり、スクロールバーがない、ユーザーのウィンドウの高さがわからないなど）。
位置：固定値と上+下の値は使用できません。これは、child1を参照しないためですが、比較的脇にレンダリングされます。
要素にはテーブルセルに適用されない境界線/書式設定があるため、display：tableを使用できません。
私はあなたが問題を理解し、そして多分賢い解決策を持っていることを願っています...
編集：これが私の問題のスクリーンショットです：
ビュー1では、ビューポートが十分に高いときに何が起こるかを確認できます。
ビュー2では、十分なスペースがなく、child2がフッターの下にスライドします...
私が欲しいのは、child2が高さを取得できるすべてのものを取得しますが、その内容をスクロールすることです。
ご協力いただきありがとうございます
セバスチャン