请不要投票关闭。这是关于为什么这不起作用的技术原因。我已经有了一个可行的解决方案，我不是在要求它。
我需要制作的简单示例 .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 .
最佳答案
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').
所以这就是规则。该规则背后的推理非常简单，并且遵循 CSS 2 中的类似规则，必须避免循环依赖。
当指定容器的高度时，它不依赖于其内容的高度，因此可以安全地将其内容高度指定为该高度的百分比，而不会创建循环依赖。
但这不适用于仅指定容器的最小高度时。如果内容的高度大于最小高度，则容器的高度取决于内容的高度，如果是百分比，则内容的高度取决于容器的高度，并且您有循环依赖。所以它故意“不起作用”，以阻止这种情况的发生。
关于css - 高度 : 100vh (working) vs min-height: 100vh (not working) for body? 背后的技术原因，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49395367/