एक डिव को सभी उपलब्ध वर्टिकल स्पेस ले जाएं?

Question

मैं एक लेआउट है कि इस तरह लग रहा है क्या करने के लिए कोशिश कर रहा हूँ:

दोनों ऊपर और नीचे भागों है एक परिभाषित ऊंचाई, हालांकि मैं बीच में दो बायीं/दायीं वर्गों सभी उपलब्ध ऊर्ध्वाधर लेने के लिए चाहते हैं अंतरिक्ष। यहां तक ​​कि मुझे अब तक क्या मिला है।

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/

मेरे परिवर्तन:

एचटीएमएल, शरीर, #wrapper, #middle, #middleleft, #middleright 'ऊंचाई: 100%' दिया जाता है

इसके बाद, # मध्यरात्रि को 'फ्लोट: बाएं' दिया जाता है, और # मिडललाइट 'ओवरफ्लो दिया जाता है; छिपा हुआ';

कृपया देखें: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/