Html 最小高度未按预期工作

给定以下结构，我需要level2在不更改结构的情况下具有

min height

。此外，我无法将

overflow:hidden

移动到另一个

类

（该示例已简化，它将影响许多其他内容）。它适用于

px

，但不适用于

%

。所有其他css属性都可以更改

我知道vh，它的工作原理和它应该的完全一样。但我希望有一个CSS2的解决方案

HTML:

• 正文和html：高度100%
• 级别1：最小高度100%，溢出隐藏
• 二级：最低高度100%
• 高度：高度200px

编辑：有关溢出的更多信息：隐藏

我使用它进行非画布导航。这是一个我不能使用最大宽度的地方（对吗？）。如果我将溢出替换为最大宽度，布局将重新计算，然后我可以在x轴（左侧和右侧）上滚动level2。与相同的问题（单击左侧的推送菜单，然后您可以滚动x轴）。我现在正在尝试的是防止x轴滚动，并能够正确使用最小高度：100%。

它还活着

---

我只是胡闹，直到它工作。

为了计算

min height

，

div#level2

需要参考其父级的

height

定义。在代码中，

div#level1

没有指定的

高度。您可以这样指定一个：



编辑：
在
div#level1
上显式设置
height
（而不是设置
minheight
），您不再需要
溢出：隐藏定义。当
div#heighter
超出浏览器高度时，删除允许页面滚动的选项

（您提到，出于其他原因，您需要
溢出：隐藏
。如果可能，请编辑您的问题以详细描述这些原因。）

谢谢。这也是我的方法，但如果“加高器”超过100%，滚动将被禁用，因为隐藏了level1溢出。请参见此处：。感谢您的努力。我用你要的信息编辑了我的问题。如果我需要进一步澄清，请告诉我。也许会有用。今天我测试了一系列不同的方法。由于它们都没有完全发挥作用，我现在将尝试重新设计整个结构（尽可能少）。我把这个答案标为正确答案，希望它能在将来帮助别人。谢谢。与showdevs答案相同的问题：如果“加高器”超过100%，则由于隐藏了level1溢出而禁用滚动。请参见此处：。
<div id="level1">
    <div id="level2">
        <div id="heighter"></div>
    </div>
</div>

#level2 {
    min-height: 1000px; /* Working */
    min-height: 100%; /* Not working */
    background-color: lightseagreen;
    display: block;
    position: absolute;
    width: 100%;
}

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

#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;
}