JSFiddle:https://jsfiddle.net/570qvk2p/1/
我有一个嵌入到 iframe 中的第三方 html 文档。 在本文档中，有一个元素的 css 规则指定高度:100%； parent 在树上爬了一些台阶，高度是固定的。
当以原始形式呈现第三方 HTMLDocument 时，具有 100% 高度的元素假定大小为 18px(适合内容)。在 iframe 内呈现时，元素采用固定高度父级 (200px) 的大小。
为什么在 iframe 中调整大小会有所不同，我该如何抵消这种情况？
以下是您可以从 fiddle 中看到的 html，当插入 iframe 时与插入顶级文档时样式不同:
<div style="height: 200px;">
<ul style="display:block;">
<li>
<div style="height: 100%;">1</div>
</li>
<li>
<div style="height: 100%;">2</div>
</li>
<li>
<div style="height: 100%;">3</div>
</li>
</ul>
</div>
这个问题: Element in iframe with height: 100% strech 描述了相同的现象，但我可以通过在推迟到 iframe 大小之前在 html 标签上设置一个大小来解决这种特殊情况。我在上面展示的似乎是那个人描述的同一问题的更一般情况。
最佳答案
您的 iframe 没有 doctype，这似乎是导致呈现问题的原因。
使用定义的文档类型构建您的 iframe 可以在您的页面和 iframe 之间提供一致的呈现:
var doc = window.frames[0].document;
var a = doc.createElement("div");
var b = document.createElement("div");
var content = "<div style=\"height: 200px;\"><ul style=\"display:block;\"><li><div style=\"height: 100%;\">1</div></li><li><div style=\"height: 100%;\">2</div></li><li><div style=\"height: 100%;\">3</div></li></ul></div>";
doc.open();
doc.write("<!DOCTYPE html>");
doc.write("<html>");
doc.write("<head></head>");
doc.write("<body>" + content + "</body>");
doc.write("</html>");
doc.close();
b.innerHTML = content;
document.body.appendChild(b);
我的印象是 iframe 继承了父页面的文档类型，但事实并非如此。也许其他人可以详细说明？
关于html - 嵌入 iframe 时，CSS 高度 100% 的行为有所不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40888566/