Question

请不要投票结束。这是关于为什么这不起作用的技术原因。我已经有了一个有效的解决方案，而且我没有要求它。

简单示例，我需要至少设置.wrapper高度，浏览器高度。

以下适用于IE10-11，Edge，Firefox，Chrome（working fiddle）：

<!doctype html>
<html lang="it">
    <head >
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Demo</title>
        <style>
            body {
                margin: 0;
                height: 100vh;
                background-color: red;
            }

            .wrapper {
                min-height: 100%;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="wrapper"></div>
    </body>
</html>

但是，如果我将body设置为min-height而不是height（即恕我直言，合理），它就不再有效了（not working fiddle）。为什么？它背后的技术原因是什么？

编辑1

Another working fiddle其中body有min-height: 100vh而.wrapper有min-height: inherit。

Another working fiddle只有.wrapper有min-height: 100vh。

Answer 1

我们走了：D我想我发现了一个问题。 fiddle

.wrapper {
                min-height: 100vh;
                background-color: green;
            }

在我看来，某些VH的最小高度 - 视口高度不能与％重叠。

vh！=％。

所以只考虑做它将包裹的最小高度从％更改为vh。

希望我帮助过。

Answer 2

CSS 2.2 spec says：

百分比是根据高度来计算的生成的包含块的块。 如果含有的高度未明确指定块（即，它取决于内容高度），这个元素没有绝对定位，百分比价值被视为＆＃39; 0＆＃39; （对于＆＃39; min-height＆＃39;）或＆＃39; none＆＃39; （对于＆＃39;最大高度＆＃39;。）

这就是规则。规则背后的原因非常简单，并遵循CSS 2中的类似规则，必须避免循环依赖。

当指定容器的高度时，它不依赖于其内容的高度，因此可以安全地将其内容高度指定为百分比，而不创建循环依赖。

但是，当仅指定容器的最小高度时，这并不适用。如果内容的高度大于最小高度，那么容器的高度取决于内容的高度，如果该高度取决于百分比，则内容的高度取决于内容的高度。高度取决于容器的高度，并且您具有循环依赖性。所以它故意“不能工作”，以阻止这种情况的发生。

高度背后的技术原因：100vh（工作）vs min-height：身体100vh（不工作）？

2 个答案:

vh！=％。