Thực hiện một Div chiếm tất cả không gian dọc có sẵn?

Question

Tôi đang cố gắng để làm một bố cục trông như thế này:

Cả hai phần trên và dưới có một chiều cao xác định, tuy nhiên tôi muốn hai bên trái/phần ngay ở giữa để mất tất cả dọc có sẵn không gian. Đây là những gì tôi đã có cho đến nay.

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

tôi đã thực hiện các phần giữa một chính xác 500px cũng giống như một showcase, nhưng như bạn thấy, tôi cũng sai lầm phần ngay giữa và phần dưới bên phải.

Answer 1

Bạn đang nói về một cái gì đó như thế này:

Fullscreen (nguồn liên kết dưới đây)

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

Ở đây bạn đi: http://jsfiddle.net/xTh5f/3/

tôi thay đổi:

html, cơ thể, #wrapper, #middle, #middleleft, #middleright được đưa ra 'height: 100%'

Tiếp theo, # middleleft được đưa ra 'float: left', và #middleright 'overflow; ẩn ';

Xin xem: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/