क्षैतिज वर्गों में HTML पृष्ठ डिवाइडिंग, खड़ी स्क्रॉलबार

Question

मैं कुछ इस तरह बनाने के लिए कोशिश कर रहा हूँ बिना:

http://jsfiddle.net/S6FUQ/

HTML है:

<div id="container"> 
    <header></header> 
    <main> 
     <section class="half"></section> 
     <section class="half"></section> 
    </main> 
</div> 

और सीएसएस है:

* { 
    margin: 0; padding: 0; 
} 
html, body, #container { 
    height: 100%; 
} 
header { 
    height: 50px; 
    background: gray; 
} 
main { 
    height: 100%; 
    background: green; 
} 
.half { 
    height: 50%; 
} 
.half:first-child { 
    background: blue; 
} 
.half:last-child { 
    background: yellow; 
} 

इसमें, मेरे पास शीर्ष पर एक पतला रिबन है, और मैं फिर से विभाजित करना चाहता हूं स्क्रीन के दो बराबर खंडों में, लेकिन मैं वर्टिकल स्क्रॉलबार प्रकट नहीं करना चाहता हूं।

मैंने margin-bottom: 50px;main के लिए प्रयास किया, लेकिन यह काम नहीं किया। मुझे क्या करना चाहिए?

Answer 1

"मुख्य" की ऊंचाई 100% - 50px होना चाहिए। यहां fiddle है।

main{height: calc(100% - 50px);} 

Answer 2

आप पहले से ही ऊंचाई सेट करने के लिए% का उपयोग कर रहे हैं ... आप अपनी समस्या का समाधान करने के लिए फिर से इसका उपयोग क्यों नहीं करते?

header { 
    height: 10%; 
    background: gray; 
    max-height:50px; //this will ensure your header will never go bigger than 50px 
} 
main { 
    height: 90%; 
    background: green; 
} 

पुनश्च: केवल समय आपके शीर्षक 50px की तुलना में छोटे होने जा रहा है जब ब्राउज़र 500px की तुलना में छोटे (जो केवल कुछ परिदृश्य मोबाइल उपकरणों में हो जाएगा) है

EXAMPLE

Answer 3

इसे पुराने ब्राउज़र पर काम करने के लिए, आप पूर्ण स्थिति का उपयोग कर सकते हैं।

Demo

#container { 
    position: relative; 
} 
main { 
    position: absolute; 
    width: 100%; 
    top: 50px; 
    bottom: 0; 
    background: green; 
}