为何使用src与srcdoc时iframe内容高度渲染效果不同？

当使用iframe的src加载Data URI时，内部设置height: 100%的div会占满iframe的全部高度，但使用srcdoc传入相同div代码时，div仅显示自身内容高度，二者渲染表现不一致。

差异根源 #

这是因为两种方式生成的文档上下文不同：

• 用src加载Data URI时，浏览器会自动为文档补充完整的DOCTYPE声明、<html>和<body>标签，且默认情况下<html>和<body>会占满iframe的视口高度，此时div的height:100%有明确的父级高度参照，因此能撑满整个iframe。
• 用srcdoc仅传入单个div时，浏览器虽会自动将其包裹进<html>和<body>，但默认的<body>没有设置高度值，div的height:100%因缺少父级高度参照，无法生效，只能自适应内容高度。

修复方案 #

在srcdoc中明确补充完整的文档结构，并为<html>和<body>设置height:100%（同时消除默认边距避免留白）：

<iframe srcdoc="<!DOCTYPE html><html><body style='height:100%; margin:0'><div style='background-color: red; height: 100%'>hello, world</div></body></html>"></iframe>

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