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

Question

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

我有一个 div，里面有一个无序列表。列表中的元素数量是可变的，所以我无法使用固定高度。包含无序列表的 div 是需要滚动条的地方，这是我的代码:

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

如前所述，无序列表包含在#page div 中。页面的高度由无序列表的值指定。有没有办法让 overflow: scroll 在像这样具有可变高度的 div 上工作，或者我必须使用 JavaScript 来做到这一点？

谢谢

Answer 1

实现此设计的一种方法...

假设您有以下 HTML:

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

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

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

.inner block 包含可以导致滚动的导航列表:

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

在这个例子中，我限制了 .inner block 的高度以适应 .main，并设置 overflow-y: scroll，这会创建一个包含在边缘内的滚动条容器 block 。

您可能需要根据您的移动平台调整它，但这个概念应该仍然适用。

演示 fiddle :http://jsfiddle.net/audetwebdesign/ac4xT/