为何body使用height:100vh生效，min-height:100vh却不生效？

各位，先明确：这帖不是来求解决方案的——我已经有一套能在IE10-11、Edge、Firefox、Chrome上稳定运行的实现了，核心目的是深挖背后的技术逻辑，搞懂为啥这套代码能跨这些浏览器满足需求。

核心需求 #

让.wrapper元素的高度至少等于浏览器视口的高度：当内容长度不足视口高度时，它会撑满整个浏览器窗口；当内容超过视口高度时，它会自动跟随内容延伸高度。

生效的代码实现（格式化后） #

<!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.0">
    <style>
        /* 关键样式部分 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .wrapper {
            min-height: 100%;
            /* 也可结合视口单位：min-height: 100vh; */
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- 页面内容区域 -->
    </div>
</body>
</html>

关键技术原因拆解 #

1. 文档高度的继承逻辑 #

浏览器默认情况下，html和body的高度是由内部内容撑开的，不会自动占满视口。我们给html, body设置height: 100%;，是让它们先承接视口的高度：html的父容器是浏览器视口，设置height:100%就能让它和视口等高；body再继承html的高度，这样.wrapper的min-height:100%就有了明确的参照基准。

2. min-height的核心作用 #

选择min-height: 100%而非height:100%是关键：如果用height:100%，当.wrapper内部内容超过视口高度时，元素高度不会自动扩展，会出现内容溢出的问题；而min-height会保证元素高度至少达到视口高度，内容增多时会自动适配增高，完美匹配需求。

3. 跨浏览器兼容的细节 #

• IE10-11/Edge：这类浏览器已经支持百分比高度的继承逻辑和min-height属性；另外<meta http-equiv="X-UA-Compatible" content="IE=edge">标签强制IE使用最新渲染模式，避免了兼容模式下的布局bug。
• Firefox/Chrome：现代浏览器对盒模型和百分比高度的解析更规范，只要正确设置html和body的高度，.wrapper的min-height:100%就能正常生效；如果用100vh视口单位，现代浏览器也完全支持，不过IE10+也兼容vh，两种方案都可行。

4. 视口单位vh的补充说明 #

如果直接用min-height: 100vh，其实可以不用给html和body设置height:100%——因为100vh直接对应视口高度的100%。不过在IE10等旧浏览器中，vh存在滚动条高度计算的小瑕疵，所以结合html/body height:100%+wrapper min-height:100%的方案兼容性更稳妥。

内容的提问来源于stack exchange，提问作者gremo