Question

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

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

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

如上所述，无序列表包含在#page div中。页面的高度由无序列表的值指定。有没有办法使溢出：滚动工作在像这样的可变高度的div上或者我必须使用JavaScript来执行此操作吗？

由于

Answer 1

接近这种设计的一种方法......

假设您有以下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/

Answer 2

简单地说，如果它具有可变高度（自动），它将永远不会在y轴（垂直）上溢出，因为div总是会增长以适应其内容。

overflow: scroll将强制它显示滚动条，但它将始终被禁用，因为内容永远不会超出显示的窗格。

如果要垂直滚动，则必须以px，％或em定义高度。

如果你height: 100%，则div将填充页面的高度，并滚动超出窗口视口高度的内容。

如果您有标题区域，请尝试以下方法：

<style>
    #header {
        height: 20%;
    }
    #body {
        height: 80%;
        overflow-y: auto;
    }
</style>
<div id="header">
</div>
<div id="body">
</div>

Answer 3

为什么不在div上使用max-height？

max-height设置元素可以展开的最大高度。我想你想要的是div永远不会离开屏幕。所以你可以设置max-height然后overflow：auto;

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

3 个答案:

接近这种设计的一种方法......