可变高度容器内的可滚动 div

Question

我想在一个高度可变的容器内有一个可滚动的 div（可垂直滚动）。我希望 div 占据 100% 的可用高度，如果需要显示滚动条。容器的高度由所有其他元素的高度组成（当然不包括这个可滚动的 div）。如何仅使用 CSS 来完成这项工作？显而易见的解决方案是将可滚动 div 的高度设置为使用 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/

Answer 1

您可以删除height，将max-height 设置为所需的值（我认为它是10em，对吗？）并将overflow-y 设置为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;
}

编辑

根据您自己的建议，如果您将绝对位置应用于正确的 div，它仍然会尊重其父级的尺寸。 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：white-space: nowrap; 正在阻止 li 短语折叠，忽略 div 宽度。