przepełnienie (przewijanie) - 100% wysokość kontenera

Question

Próbuję mieć pływającą div (nazywam ją "bocznym paskiem") wyświetlać 100% wysokości kontenera i przewijać w razie potrzeby.

jeśli pasek boczny ma większą zawartość (wysokość) niż pojemnik miałby inaczej, należy przewinąć.

Zawartość jest dynamiczna, a ustalone wysokości nie są możliwe.

Chciałbym unikać tabel, jeśli to możliwe, ale użyłbym ich, gdyby to było jedyne rozwiązanie.

Nie chcę używać javascript.

ten efekt można uzyskać za pomocą tabel, jeśli stół, ciało i komórki mają 100% wysokości, aw jednej komórce: div z wysokością: 100% i przepełnienie: przewijanie jest ustawione. działa to w webkitach (Safari i Chrome), a także IE, ale kończy się niepowodzeniem w gecko (Fx) - "zawieszenie" oznacza, że ​​element div z większą zawartością niż kontener rozszerzy kontener (ponownie tylko w Fx). ten sam pomysł działa w webkit, jeśli używa się div z display: table/table-row/table-cell, ale kończy się niepowodzeniem zarówno w Fx, jak i IE. Mogę podać próbkę tego, jeśli byłoby to pomocne.

Efekt ten można również osiągnąć za pomocą elementu iframe z wysokością: 100%, który działa we wszystkich nowoczesnych przeglądarkach, ale chciałbym również unikać niepotrzebnych elementów iframe, jeśli to możliwe.

muszę myśleć, że skoro jest to możliwe przy użyciu wyżej „hacki” to może być możliwe przy użyciu tabeli mniej, klatka mniej css, ale jest poza moim poziomie zrozumienia.

jakieś sugestie? tyia.

Answer 1

Oto CSS stylizacji do osiągnięcia tego celu:

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

żywo demo:http://jsfiddle.net/TUwej/2/