javascript - 我可以在高度可变的div上使用 `overflow: scroll`吗？

是否可以在高度设为自动的div上使用overflow: scroll？

我有一个div，里面有一个无序列表。列表中的项目数量是可变的，因此我无法使用固定的高度。包含无序列表的div是滚动条所在的位置，这是我的代码:

#page {
    height: auto; /* default */
    overflow-y: scroll;
    overflow-x: hidden;
}

如前所述，无序列表包含在#page div中。页面的高度由无序列表的值分配。有没有办法使溢出:在像这样可变高度的div上滚动工作，还是必须使用JavaScript来做到这一点？

谢谢

最佳答案

进行此设计的一种方法...

假设您具有以下HTML:

<div class="main">
    <div class="inner">
        <ul>
            <li>Some list items...</li>
            ...
        </ul>
    </div>
</div>

.main块适合页面，例如，通过绝对定位:

.main {
    border: 2px dashed blue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.inner块保存着可能导致滚动的导航列表:

.inner {
    border: 2px dotted red;
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    overflow-y: scroll;
}

在此示例中，我限制了.inner块的高度以适合.main，
并设置overflow-y: scroll，这将创建一个包含在边缘内的滚动条
容器块的

您可能需要对此进行调整以适合您的移动平台，但是该概念仍然适用。

演示小提琴:http://jsfiddle.net/audetwebdesign/ac4xT/

关于javascript - 我可以在高度可变的div上使用 `overflow: scroll`吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17374566/