相同HTML与CSS下`height:100%`表现差异原因咨询

核心问题大概率是文档模式差异（标准模式 vs 怪异模式），导致CSS百分比高度的计算规则不同：

• 标准模式下：如果父元素未显式设置height（默认值为auto），子元素的height:100%会被解析为auto，高度由内容撑开。
• 怪异模式下：即使父元素高度为auto，子元素的height:100%会被解析为视口高度的100%，也就是全屏效果。

排查与验证步骤 #

1. 检查模仿页面的第一行是否包含<!DOCTYPE html>声明：MDN原页面必然使用标准模式，若你漏加该声明，浏览器会触发怪异模式，改变渲染规则。
2. 确认文档模式：在浏览器开发者工具控制台输入document.compatMode，返回BackCompat表示怪异模式，CSS1Compat表示标准模式。
3. 修复方法：给模仿页面第一行添加<!DOCTYPE html>声明，刷新后height:100%的表现会和原MDN站点一致。

为何DOM与CSS一致却出现差异？ #

浏览器在不同文档模式下的默认渲染规则完全不同，这种差异不属于DOM或CSS代码范畴，因此元素检查中看不到代码区别，但实际渲染逻辑已改变。你提到将height:100%改为height:auto能解决问题，是因为auto在任何模式下都会让元素高度由内容撑开，避开了百分比高度的模式差异。

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