बच्चे div ऊंचाई स्थिति के अंदर 100%: तय div + अतिप्रवाह ऑटो

Question

जब प्रयास कर मैं कुछ अजीब व्यवहार का सामना कर रहा हूँ निम्नलिखित (jsfiddle देखें: http://jsfiddle.net/9nS47/)।

HTML:

<div id="slider"> 
    <div id="wrapper"> 
     <div id="navigation"></div> 
     <div id="container"> 
      <div id="button"></div> 
     </div> 
    </div> 
</div> 

सीएसएस:

HTML,BODY 
{ width:100%; height:100%; } 
* { margin: 0; padding: 0; } 
#slider 
{ 
    position: fixed; 

    top: 0; 
    bottom: 0px; 
    left: 100px; 

    overflow-y: auto; 

    background-color: red; 
} 

#wrapper 
{ 
    position: relative; 

    height: 100%; 

    background-color: #000000; 

    min-height:400px; 
} 

#navigation 
{ 
    display: inline-block; 
    width: 80px; 
    height: 100%; 

    background-color: #0000FF; 
} 

#container 
{ 
display: inline-block; 
    height: 100%; 

    background-color: #00FF00; 
} 

#button 
{ 
    width: 22px; height: 100%; 
    float:right; 

    background-color: #CCFFCC; 
    cursor:pointer; 
} 

मुझे क्या करना है कि पूरे दिखाई खिड़की ऊंचाई तक फैला है और केवल एक बाईं ओर नेविगेशन पट्टी बना रही है कोशिश कर रहा हूँ, तो उसकी ऊंचाई एक स्क्रॉलबार शो उदाहरण के लिए 400px से छोटा है। कुछ divizing समस्याओं के कारण उस div के लिए स्क्रॉलबार हमेशा दिखाई देता है (नीचे एक अतिरिक्त पिक्सेल है जिसे मैं समझा नहीं सकता [रंग: लाल])।

फ़ायरफ़ॉक्स भी पहले नीचे दूसरे बच्चे तत्व ले जाता है जब स्क्रॉलबार दिखाई दे रहा है क्योंकि स्क्रॉलबार सामग्री क्षेत्र का हिस्सा प्रतीत हो रहा है और इस तरह 20px स्थान के आसपास का समय लगता है। यह तब नहीं होता है जब ओवरफ़्लो: ओवर ओवरफ़्लो के साथ ऑटो को प्रतिस्थापित किया जाता है: हालांकि स्क्रॉल करें।

एटीएम लेआउट बदल रहा है (विशेष रूप से स्थिति के साथ कंटेनर: निश्चित) एक विकल्प नहीं है।

हरे और नीले रंग के बॉक्स के बीच की जगह को ध्यान में रखें। एक सफेद जगह की समस्या होने लगता है।

Answer 1

के बाद से ऐसा लगता है जैसे आप अपने 'आवरण' कोड बहुत बदलने में असमर्थ हैं, मैं अपने मूल कोड के रूप में संभव के रूप में छोटे से बदलने की कोशिश की। असल में, मैंने केवल एक चीज कुछ jQuery जोड़ने के लिए किया था।

this updated jsfiddle देखें। मैं jQuery को शामिल किया है और जावास्क्रिप्ट मैं जोड़ा यह था:

$(window).bind("load resize", function(){ 
    //this runs as soon as the page is 'ready' 
    if($(window).height() < 400){   
     $("#slider").css("overflow-y","scroll"); 
    }else{   
     $("#slider").css("overflow-y","hidden"); 
    } 
}); 

मूल रूप से, 'ऑनलोड' और 'onrezise', jQuery का पता लगा लेता है, तो आप स्क्रॉलबार दिखाने या नहीं करना चाहिए।

कारण यह है कि आपके "ऑटो" काम नहीं कर रहा slider तत्व की "निर्धारित" स्थिति की वजह से है। ब्राउज़र पूरी तरह से ऊंचाई को समझ नहीं सकता है।