嵌入 iframe 时，CSS 高度 100% 的行为不同答案

【问题标题】：CSS height 100% behaves different when embedded in iframe嵌入 iframe 时，CSS 高度 100% 的行为不同
【发布时间】：2017-04-14 18:54:54
【问题描述】：

JSFiddle：https://jsfiddle.net/570qvk2p/1/

我有一个嵌入到 iframe 中的第三方 html 文档。在本文档中，有一个元素的 css 规则指定 height: 100%;父级在树上的一些步骤具有固定的高度。

以原始形式呈现第三方 HTMLDocument 时，100% 高度的元素假定大小为 18px（适合内容）。在 iframe 内渲染时，元素采用固定高度父级 (200px) 的大小。

为什么在 iframe 中调整大小的工作方式会有所不同，我该如何解决？

以下是您可以从小提琴中看到的 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 标记上设置大小，可以解决这种特殊情况。我在上面展示的似乎是该人描述的同一问题的更一般情况。

【问题讨论】：

标签： html css iframe

【解决方案1】：

您的 iframe 没有 doctype，这似乎导致了呈现问题。

使用定义的 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);

Updated jsfiddle

我的印象是 iframe 继承了父页面的文档类型，但事实并非如此。也许其他人可以详细说明？

【讨论】：

就我提供的示例而言，您似乎是正确的，这太棒了！它引导我朝着正确的方向前进。但是，在我正在使用的真实 DOM 上，有一个 doctype 是用 document.implementation.createDocumentType 创建的，并且显然成功地附加到了文档中。但是 document.doctype 仍然为空。关于为什么会这样的任何想法？
老实说不知道。希望其他人会来帮助你。祝你好运！
let newtype = document.implementation.createDocumentType('html', '', ''); window.iframe.document.insertBefore(newtype, window.iframe.document.documentElement);
我还没有 createDocumentType 实际工作。参考文献有问题。 .write() 虽然有效。