altezza div bambino 100% posizione interna: div fisso + overflow automatico

Question

Si verifica uno strano comportamento quando si tenta quanto segue (vedere 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; 
} 

Quello che sto cercando di fare è fare una barra di navigazione a sinistra che attraversa l'intera altezza della finestra visibile e solo mostra una barra di scorrimento se la sua altezza è più piccolo rispetto ad esempio a 400 px. La barra di scorrimento per quel div sembra essere sempre visibile a causa di alcuni problemi di ridimensionamento (c'è un pixel in più in basso che non riesco a spiegare [colore: rosso]).

Firefox sposta anche il secondo elemento figlio sotto il primo quando la barra di scorrimento è visibile perché la barra di scorrimento sembra essere parte dell'area del contenuto e occupa quindi circa 20px di spazio. Ciò non accade se Overflow: Auto viene sostituito con Overflow: scroll tuttavia.

Lo sportello automatico che modifica il layout (in particolare il Contenitore con posizione: fisso) non è un'opzione.

Non importa lo spazio tra la casella verde e quella blu. Sembra essere un problema di spazio bianco.

Answer 1

Poiché sembra che non sia possibile modificare molto il codice del "wrapper", ho provato a modificare il codice originale il meno possibile. In effetti, l'unica cosa che ho fatto è stato aggiungere un po 'di jQuery.

Check out this updated jsfiddle. Ho incluso jQuery e javascript ho aggiunto era questo:

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

In sostanza, 'onload' e 'onrezise', il jQuery capisce se si deve mostrare le barre di scorrimento o no.

Il motivo per cui la "auto" non funziona è a causa della posizione "fissa" dell'elemento slider. Il browser non riesce a capire perfettamente le altezze.