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>

body和html：height 100％
等级1：最小高度100％，溢出隐藏
2级：最小高度100％
加高：高度200px

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

我正在使用它进行扫描导航。这是一个我不能使用max-width的地方（对吧？）。如果我用最大宽度替换溢出，则重新计算布局，然后我可以在x轴（左和右）上滚动level2。与here相同的问题（单击Push-Menu-Left然后您可以滚动x轴）。我现在正在尝试阻止x轴滚动并能够使用最小高度：100％正确。

Answer 1

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

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

WORKING EXAMPLE

编辑：

在height上明确设置div#level1（而不是设置min-height），您不再需要overflow:hidden定义。删除它允许页面在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

Answer 2

http://jsfiddle.net/b8uj75e5/3/

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

IT LIVES。

我只是搞砸了，直到它奏效。

最小高度不按预期工作

HTML：

2 个答案:

编辑：