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.

Snips

Could help: #486327 – Forgot

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/

Antiperistalsis

This is similar to solutions in #10981322 . There, each solution worked when the height was a concrete number, not involving percent. In this case here, the concrete height comes from the height of the main paragraph. I think you always need a concrete height somehow. – Edrei

I needed to fit match the height of the scrollable element to the height of the non-scrollable element which is sized according to its contents, and this worked great – Hypothermia

Answer 2

In most modern browsers, you can also do

.your-scrollable-div {
  height: calc(100%);
  overflow-y: scroll;
}

I've seen this work with Chrome & Firefox, but Safari balks here.

Phototherapy

this is actually brilliant. solved creating multiple dynamic height scrollable stacked on top. as far as i can tell, this is the only way to transform a relative height into a fixed height. but i'm not a css expert. – Impale