css - 高度 : 100vh (working) vs min-height: 100vh (not working) for body? 背后的技术原因

标签 css

请不要投票关闭。这是关于为什么这不起作用的技术原因。我已经有了一个可行的解决方案,我不是在要求它。

我需要制作的简单示例 .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>

但是如果我设置 bodymin-height而不是 height (即,恕我直言,合理),它不再起作用( not working fiddle )。为什么?它背后的技术原因是什么?

编辑 1

Another working fiddle哪里bodymin-height: 100vh.wrappermin-height: inherit .

Another working fiddle哪里只有.wrappermin-height: 100vh .

最佳答案

CSS 2.2 spec says :

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/

相关文章:

css - 位置固定在 Internet Explorer 上

html - 如何使用 CSS 设置代码列表的样式?

Javascript DIV 滚动滚动

javascript - 如何实现像jQuery 的slideDown 一样的向下滑动效果,但只使用CSS?

javascript - 使用视差代码更改导航栏干扰的颜色

javascript - CSS设置避免点击时出现上传弹出窗口

html - 将2张图像作为背景放置在一个 body 上

html - 动态地使div的宽度等于其高度

javascript - 选择两个 id 之间的每个元素

javascript - 每当类名更改时,如何再次执行js代码?