Question

为什么在元素上设置overflow: auto;不会导致它在内容溢出时滚动？

我有一个两列布局，左栏固定，右栏滚动。右列设置为overflow: auto;，并且有一个子div.content。如果我将其最小高度设置为高于窗口，则不会出现滚动条。如果我在其子项上设置了最小高度，则会显示div.content滚动条。

这是为什么？当main上设置最小高度时，为什么不会显示滚动条？

这是一个小提琴：http://jsfiddle.net/gT8tq/1/

<div class="page-wrapper">
    <aside>
        <p>Fixed</p>
    </aside>
    <main>
        <section class="content">
            <p>Scroll</p>
        </section>
    </main>
</div>

...样式

html, body {
    height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
}
.page-wrapper {
    bottom: 0; left: 0; right: 0; top: 0;
    position: absolute;
    z-index: 100;
}
aside, main {
    bottom: 0; top: 0;
    padding: 20px;
    position: absolute;
}
aside {
    background-color: #eee;
    left: 0;
    width: 30%;
}
main {
    background-color: #ccc;
    left: 30%; right: 0;
    overflow: auto;
    /* Here is the issue; uncommenting this breaks scrolling; Why? */
    /* min-height: 1000px; */
}
.content {
    min-height: 1000px;
}

Answer 1

在你的CSS中，

html, body {
    height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
}

这意味着无论高度如何溢出身体元素，滚动条都不会出现。

此外，主要元素中的overflow: auto是必需的，因为实际上滚动条属于主元素而不是默认的body元素。

main {
    background-color: #ccc;
    left: 30%; right: 0;
    overflow: auto;
}

如果你不想在body元素中使用overflow: hidden，你必须设置position：fixed to aside元素。

在http://jsfiddle.net/gT8tq/4/

上查看

Answer 2

当您在min-height: 1000px元素上设置main时，最终发生的事情是其内容不再溢出，因为它现在是1000像素高。请注意，即使您使用绝对定位和min-height将main元素锚定到页面边界，bottom: 0; top: 0优先，只是因为这会导致main元素小于1000像素高。然后发生的是，元素根据其top坐标保持锚定到顶部并向下溢出，因为{em>过度约束归功于min-height;所有这些内容的详细信息都记录在规范的10.6.4和10.7部分中。

由于main元素不再出现溢出，因此不再需要为其内容生成滚动条。正如我所描述的那样，main元素及其内容仍然溢出页面，但由于您在overflow: hidden上指定了html, body，该页面将拒绝为{{1}生成滚动条元素。因此，最终结果是根本不会生成滚动条。

如果强制main生成垂直滚动条，即使没有发生溢出，也可以将main替换为overflow: auto，您会看到the scrollbar actually extends beyond the page bounds这样你就不会更长时间看底部控件 - 这证明通过添加overflow-y: scroll实际上使min-height元素更高：

main

Answer 3

这是因为您为某个元素设置了行为，在本例中为<main>。当<main>的内容大于元素本身时应该做什么？

在这种情况下，你说它应该在这种情况下创建滚动条。如果你把溢出：auto;在页面包装器上，它会做你所期望的，因为那样你告诉div当它的内容溢出时该做什么。

这是否有意义，还是需要更多澄清？

Answer 4

您没有使用position:relative; .content查看此信息： http://jsfiddle.net/gT8tq/2/

为什么`overflow：auto;`即使内容溢出也不会导致元素滚动？

4 个答案: