wysokość div dziecka 100% pozycja wewnętrzna: fixed div + przepełnienie auto

Question

Występuje dziwne zachowanie przy próbie następujących czynności (zobacz 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> 

CSS:

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; 
} 

Co staram się robić robi lewy boczny pasek nawigacyjny, który obejmuje całą widoczną wysokości okna i tylko pokazuje pasek przewijania, jeśli jego wysokość jest mniejszy niż na przykład 400px. Pasek przewijania dla tego elementu div wydaje się być zawsze widoczny z powodu pewnych problemów ze zmianą rozmiaru (na dole znajduje się dodatkowy piksel, którego nie potrafię wyjaśnić [color: red]).

Firefox przenosi także drugi element podrzędny poniżej pierwszego, gdy pasek przewijania jest widoczny, ponieważ pasek przewijania wydaje się być częścią obszaru zawartości, a zatem zajmuje około 20 pikseli. Nie dzieje się tak, jeśli Overflow: Auto zostanie zastąpione przez Overflow: przewiń jednak.

ATM zmiana układu (w szczególności Kontener z pozycją: stała) nie jest opcją.

Nie zwracaj uwagi na przestrzeń między zielonym a niebieskim pudełkiem. Wydaje się być problemem białych znaków.

Answer 1

Ponieważ wydaje się, że nie możesz zmienić swojego kodu "opakowania", starałem się jak najmniej zmienić oryginalny kod. W rzeczywistości jedyną rzeczą, którą zrobiłem było dodanie jQuery.

Zapoznaj się z this updated jsfiddle. Mam włączone javascript jQuery i dodałem było to:

$(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"); 
    } 
}); 

zasadzie „onload” i „onrezise”, jQuery dane, jeśli trzeba pokazać przewijania czy nie.

Nie działa funkcja "auto" z powodu "ustalonej" pozycji elementu slider. Przeglądarka nie jest w stanie dokładnie określić wysokości.