2つのサイドバイサイド要素の高さをブラウザの高さに合わせる方法は？

Question

この例では、http://jsfiddle.net/mnXH9/、content-display要素の高さとnav-menu-containerの高さは固定されています。 Iはcontent-displayとnav-menu-container要素がブラウザの高さなどのブラウザウィンドウの残りの高さまで延びの高さは、ユーザによって調整されて作るにはどうすればよい

は、ブラウザウィンドウ内に高さを提供した400ピクセルの（高さよりも大きいですヘッダーとnav-menu-containerの組み合わせ）？

ブラウザの高さの合計がヘッダー（100px）とnav-menu-container（300px）の高さの合計より大きい場合は、スクロールバーがnav-menu-content要素内にあることをお勧めします。

ブラウザウィンドウの高さが400px未満の場合、ブラウザウィンドウにスクロールバーが表示され、100pxヘッダー全体でスクロールし、次の要素の300px最小高さを許可します。

EDIT

jsfiddleがどのように見えるかのフォトショップのモックアップがされている添付。

タブ1ブラウザの高さが400ピクセル

より大きい場合、ブラウザの高さ未満400ピクセル

タブ1である場合

タブ2ブラウザ高さが400ピクセル

EDIT

より大きい場合、ブラウザの高さ未満400ピクセル

タブ2でありますタブ2のhttp://jsfiddle.net/mnXH9/25/show/

Answer 1

EDITは - より良いオフに基づいて、コメントを働くものにフィドルのバージョンを切り替えてIE8を指摘しました。

View a full screen version here（view css here）。これは@mediaのクエリと他のCSS3を使用しているため、古いブラウザでは機能しませんが、リクエストしたものとまったく同じだと思います。これを達成するために、2つの列をposition: absoluteにリセットしました。必要に応じて高さを確認するためのjavascriptを使用して古いブラウザを修正することができます。

IE8（気にする場合）が#tabsに設定されている必要があります（他のブラウザの効果をより良くするために、.panelの中から削除しました）。

Answer 2

<style> 
html { 
height: 100%; 
} 
body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 
#container {margin:auto; height:100%; width: 500px;} 
#header {top:0px;background-color: pink; height:100px; border-bottom: none; z-index:50} 
#content-display {position:relative; width: 300px; height:100%; float: left; z-index:-1;} 
#nav-menu-container {position:relative; bottom:43px;padding-top:50px;left:300px; width:200px; height:100%; background:lightblue; z-index:-1;} 
#nav-menu-content { width: 100px; margin-left:50px; margin-top:43px;height:300px; background:greenyellow;} 
#tabs ul li a {font-family: Arial,Helvetica,Verdana,sans-serif; font-size: 13px;} /*Tab title text*/ 
#tabs {height:100%;} 
.panel{height:218px; overflow: auto;} 
</style> 

Answer 3

faux columnsを使用すると、タブのコンテナに相当する高さを実現できます。右のナビゲーションは、手動の高さ設定で周囲を嘲笑するより簡単です。そうすれば、ブラウザの高さ全体に拡大して見えるようになります。