overflow (scroll) - 100% altezza del contenitore

Question

sto provando ad avere un div floated (chiamiamolo 'barra laterale') visualizzare il 100% dell'altezza del contenitore, e scorrere se necessario.

se la barra laterale ha più contenuto (altezza) di quanto il contenitore avrebbe altrimenti, dovrebbe scorrere.

il contenuto è dinamico e le altezze fisse non sono possibili.

Vorrei evitare le tabelle se possibile, ma le userei se fosse l'unica soluzione.

non voglio usare javascript.

questo effetto può essere ottenuto con tabelle, se la tabella, il corpo e le celle hanno tutte il 100% di altezza e in una cella un div con altezza: 100% e overflow: lo scorrimento è impostato. questo funziona in webkit (Safari e Chrome) così come IE, ma fallisce in gecko (Fx) - "fallisce" significa che il div con più contenuto del contenitore espande il contenitore (sempre solo in Fx). la stessa idea funziona in webkit se si usano le div con display: table/table-row/table-cell, ma fallisce sia in Fx che in IE. posso fornire un esempio di questo se sarebbe utile.

questo effetto potrebbe anche essere ottenuto utilizzando un iframe con altezza: 100%, che sembra funzionare in tutti i browser moderni, ma vorrei evitare anche iframe non necessari, se possibile.

devo pensare che dal momento che è possibile utilizzare gli "hack" sopra, potrebbe essere possibile utilizzare css senza tabella, senza frame, ma è oltre il mio livello di comprensione.

qualche suggerimento? tyia.

Answer 1

Ecco stili CSS per raggiungere questo obiettivo:

#container { width:500px; border:3px solid red; margin:0 auto; position:relative; } 
 

 
#sidebar { position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; } 
 

 
#main { margin-left:150px; } 
 

 
p, ul { padding:10px; }

<div id="container"> 
 
    <div id="sidebar"> 
 
     <ul> 
 
      <li> line 1 </li> 
 
      <li> line 2 </li> 
 
      <li> line 3 </li> 
 
      <li> line 4 </li> 
 
      <li> line 5 </li> 
 
      <li> line 6 </li> 
 
      <li> line 7 </li> 
 
      <li> line 8 </li> 
 
      <li> line 9 </li> 
 
      <li> line 10 </li> 
 
      <li> line 11 </li> 
 
      <li> line 12 </li> 
 
      <li> line 13 </li> 
 
      <li> line 14 </li> 
 
      <li> line 15 </li> 
 
      <li> line 16 </li> 
 
      <li> line 17 </li> 
 
      <li> line 18 </li> 
 
      <li> line 19 </li> 
 
      <li> line 20 </li> 
 
     </ul> 
 
    </div> 
 
    <div id="main"> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> 
 
    </div> 
 
</div>

demo dal vivo:http://jsfiddle.net/TUwej/2/