desbordamiento (desplazamiento) - 100% altura del contenedor

Question

Estoy tratando de tener un div flotante (llámalo 'barra lateral') mostrar el 100% de la altura del contenedor, y desplazarse si es necesario.

si la barra lateral tiene más contenido (altura) de lo que el contenedor tendría de lo contrario, debería desplazarse.

el contenido es dinámico y las alturas fijas no son posibles.

me gustaría evitar tablas si es posible, pero las usaría si esa fuera la única solución.

No quiero usar javascript.

este efecto se puede lograr con tablas, si la tabla, el cuerpo y las celdas tienen una altura del 100%, y en una celda una div con altura: 100% y desbordamiento: desplazamiento establecido. esto funciona tanto en webkit (Safari y Chrome) como en IE, pero falla en gecko (Fx): 'falla' significa que el div con más contenido que el contenedor expandirá el contenedor (nuevamente solo en Fx). la misma idea funciona en webkit si se usan divs con display: table/table-row/table-cell, pero falla tanto en Fx como en IE. Puedo proporcionar una muestra de esto si fuera útil.

este efecto también se puede lograr utilizando un iframe con altura: 100%, que parece funcionar en todos los navegadores modernos, pero me gustaría evitar iframes innecesarios si es posible también.

Tengo que pensar que, dado que es posible utilizar los 'hacks' anteriores, podría ser posible usar un CSS sin cuadros y sin marcos, pero está más allá de mi nivel de comprensión.

alguna sugerencia? Tyia.

Answer 1

Aquí es de estilo CSS para lograr esto:

#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>

Demostración en directo:http://jsfiddle.net/TUwej/2/