html - 最小高度未按预期工作

Question

给定以下结构，我需要 level2 有一个 min-height 而不改变结构。此外，我无法将 overflow: hidden 移动到不同的 class (该示例已简化，它会影响很多其他事情)。它适用于 px，但不适用于 %。可以更改所有其他 css 属性。

我知道 vh，它的工作原理与它应该的完全一样。但我喜欢使用 CSS2 的解决方案。

Fiddle

HTML:

<div id="level1">
    <div id="level2">
        <div id="heighter"></div>
    </div>
</div>

• 正文和 html:高度 100%
• 级别 1:最小高度 100%， overflow hidden
• 2 级:最小高度 100%
• 高度:高度 200px

编辑:关于溢出的更多信息:隐藏

我将其用于非 Canvas 导航。这是我不能使用 max-width 的地方(对吧？)。如果我用最大宽度替换溢出，布局将被重新计算，之后我可以在 x 轴(左右)上滚动 level2。与 here 相同的问题(点击 Push-Menu-Left 然后你就可以滚动 x 轴)。我现在正在尝试的是防止 x 轴滚动并能够正确使用 min-height: 100%。

Answer 1

为了计算min-height，div#level2需要引用其父元素的height定义。在您的代码中，div#level1 没有指定的高度。你像这样指定一个:

#level1 {
    height:100%;
    overflow: hidden; /* This has to be here */
    background-color: red;
}

WORKING EXAMPLE

编辑:

在 div#level1 上显式设置 height(而不是设置 min-height)，您不再需要 overflow:隐藏定义。当 div#heighter 扩展到浏览器的高度之外时，删除它允许页面滚动。

(您提到您出于其他原因需要 overflow:hidden。如果可能，请编辑您的问题以更多地描述这些原因。)

#level1 {
    height:100%;
    background-color: red;
}

#level2 {
    min-height: 100%;
    background-color: lightseagreen;
}

#heighter {
    height: 2000px;
    width: 100px;
    background-color: white;
    border: 5px dashed black;
}

WORKING EXAMPLE