Divがすべての利用可能な垂直スペースを占めるようにしますか？

Question

私はこのようになりますレイアウトをやろうとしている：

トップとボトムの両方の部分は、しかし、私はすべての利用可能な垂直を取るために真ん中の2つの左/右のセクションを定義し、高さを望んでいますスペース。これまでに私が得たものがここにあります。

http://jsfiddle.net/xTh5f/2/

私はちょうどショーケースとして中段に正確な500pxなどをしたが、あなたが見ることができるように、私はまた、右中央セクション、および右下の部分を台無しに。

Answer 1

あなたはこのような何かについて話している：

Fullscreen（ソースは下記にリンク）

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0;; 
    color: white; 
} 
#wrapper { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
#wrapper > div { 
    display: table-row; 
} 
#wrapper > div > div { 
    display: table-cell; 
} 
#top, 
#bottom { 
    height: 50px; 
} 
#wrapper > div > #topleft, 
#wrapper > div > #middleleft, 
#wrapper > div > #bottomleft { 
    width: 300px; 
} 
#wrapper > div > #middleleft { 
    background: #23A9E0; 
} 
#wrapper > div > #middleright { 
    background: #39E023; 
} 
#wrapper > div > #topright, 
#wrapper > div > #bottomright { 
    background: #208D11; 
} 
#wrapper > div > #topleft, 
#wrapper > div > #bottomleft { 
    background: #092A7C; 
} 

http://jsfiddle.net/xTh5f/4/

Answer 2

ここに行く：http://jsfiddle.net/xTh5f/3/

私の変更を：与えられ#middleright

HTML、ボディ、#wrapper、#middle、#middleleft、 '高さ：100％'

次に、＃ middleleftは 'float：left'、#middleright 'はオーバーフローします。隠された '。

ご覧ください。http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/