CODEWITHSUNDEEP
csshtmlheightscrollable
Yonder
Yonder

Reputation: 739

Scrollable div within a container of variable height

I want to have a scrollable div (vertically scrollable) within a container that is of variable height. I want the div to take up 100% of the available height and if needed show scrollbars. The height of the container is made up of all the other elements' heights (this scrollable div excluded of course). How can I make this work using only CSS? The obvious solution is otherwise to set the height of the scrollable div to whatever the container height will be calculated to using javascript.

HTML:

<div class="toolbar">
    <div class="left">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
            <li>List item description</li>
        </ul>        
    </div>
</div>

CSS:

.toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1em;
    background-color: lightgrey;
    border-top: 1px solid grey;
    height: 10em; /* I want to remove this */
}

ul {
    display: inline-block;
}

.left {
    float: left;
}

.right {
    float: right;
    height: 100%; /* I want this to take up only the possible parent height */
    overflow-y: auto;
    white-space: nowrap; /* Is this really needed? */
    padding: 1em;
}

.toolbar:after {
    content: "";
    display: table;
    clear: both;
}

JSFiddle:

http://jsfiddle.net/fTPv5/2/

Upvotes: 3

Views: 3757

Answers (1)

Digger
Digger

Reputation: 738

You can remove the height, set the max-height to the desired value (I recon it's 10em, right?) and set overflow-y to auto:

.toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1em;
    background-color: lightgrey;
    border-top: 1px solid grey;
    max-height:10em;
    overflow:auto;
}

EDIT

By your own suggestion, if you apply absolute position to the right div, it'll still respect the dimensions of it's parent. Here's how the code ended

.right {
    right:1em;
    bottom:1em;
    top:1em;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap; /* Is this really needed? */
    padding: 1em;
    background-color: #fff;
    position: absolute;
}

PS: The white-space: nowrap; is preventing the li phrase to collapse, ignoring the div width.

Upvotes: 3

Related Questions