भीतरी div 100% ऊंचाई होने की जरूरत है

Question

यहाँ मेरी HTML है:

<div id="container"> 
    <div id="left-container"> 
    </div> 

    <div id="right-container"> 
    </div> 
</div> 

कंटेनर है 100% ऊंचाई (मैं Firebug के साथ यह जाँच)। लेकिन #left_container को 100% भी होना चाहिए और यह नहीं है!

नीचे मेरा सीएसएस और screenshot है। पीला 100% होना चाहिए। पीला #left-container

html, body { 
    height: 100%; 
} 
#container { 
    position:relative; 
    margin: 0 auto; 
    width: 100%; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
    background: #fff; 
} 
#left-container { 
    width: 300px; 
    background: #ff0; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
} 

Answer 1

यह लेख विस्तार से दोनों मुद्दे और समाधान पर चर्चा करता है:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

यह भी मदद कर सकता है:

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id='outer'> 
    <div id='inner'> 
    </div> 
    text 
</div> 

ऊपर के बारे में अधिक जानकारी के लिए यहाँ देखें:
How to make a floated div 100% height of its parent?

Answer 2

की पृष्ठभूमि आप उपयोग करने के लिए सिर्फ

margin:0; 
padding:0; 
height:100%; 

conatainers के लिए आप क्या चाहते प्राप्त करने में सक्षम होना चाहिए।

Answer 3

इस समस्या से संपर्क करने का सबसे अच्छा तरीका बॉक्स के बाहर सोचना है थोड़ा सा। ऐसा कोई कारण नहीं है कि दोनों कंटेनरों को 100% तक फैलाने की आवश्यकता है यदि आप दोनों के लिए पृष्ठभूमि खींचने के बारे में चिंतित हैं। Faux Columns नामक एक बहुत ही सरल तकनीक है जिसमें आप दोनों साइडबार के लिए पृष्ठभूमि को एक एकल पृष्ठभूमि छवि में जोड़ते हैं, और उस छवि में मुख्य कंटेनर की पृष्ठभूमि सेट करते हैं। जब एक लंबा साइडबार मुख्य कंटेनर फैलाता है, तो यह दोनों साइडबार के लिए पृष्ठभूमि को नीचे लाता है।