overflow (scroll) - 100% container height

Question

i'm trying to have a floated div (call it 'sidebar') display 100% of container height, and scroll if necessary.

if the sidebar has more content (height) than the container would have otherwise, it should scroll.

content is dynamic and fixed heights aren't possible.

i'd like to avoid tables if possible, but would use them if that was the only solution.

i don't want to use javascript.

this effect can be achieved with tables, if the table, body, and cells are all given 100% height, and in one cell a div with height:100% and overflow:scroll is set. this works in webkit (Safari and Chrome) as well as IE, but fails in gecko (Fx) - 'fails' means that the div with more content than the container will expand the container (again only in Fx). the same idea works in webkit if using divs with display:table/table-row/table-cell, but fails in both Fx and IE. i can provide a sample of this if it'd be helpful.

this effect could also be achieved using an iframe with height:100%, which seems to work in all modern browsers, but i'd like to avoid unnecessary iframes if possible as well.

i have to think that since it's possible using the above 'hacks' it might be possible using table-less, frame-less css, but is beyond my level of understanding.

any suggestions? tyia.

Answer 1

Here's CSS styling to accomplish this:

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

Live demo: http://jsfiddle.net/TUwej/2/