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宽度。

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

1 个答案:

修改