嵌入iframe时，CSS高度100％表现不同 [英] CSS height 100% behaves different when embedded in iframe
问题描述
JSFiddle： https://jsfiddle.net/570qvk2p/1/
JSFiddle: https://jsfiddle.net/570qvk2p/1/
我有一个第三方html文档，我嵌入到iframe中。
在这个文档中有一个带有css规则的元素，用于指定高度：100％;
I have a third-party html document that I am embedding in an iframe. Within this document there is an element with a css rule specifying height: 100%; A parent some steps up the tree has a fixed height.
在以原始形式呈现第三方HTMLDocument时，高度为100％的元素的大小为18px（适合内容）。在iframe中渲染时，该元素将假定固定高度父元素（200px）的大小。
When rendering the third party HTMLDocument in its original form, the element with 100% height assumes a size of 18px (fitting to content). When rendering inside an iframe, the element assumes the size of the fixed height parent (200px).
为什么在iframe中工作的大小会有所不同，我如何抵消这种情况？
Why would sizing work differently within the iframe and how can I counteract that?
以下是您可以从小提琴中看到的html插入到iframe或插入顶级文档时最终呈现的样式：
The following is the html that you can see from the fiddle ends up styled different when inserted into an iframe vs when inserted into the top level document:
<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>
这个问题：
iframe中元素的高度：100％strech
描述了相同的现象，但是这种特殊情况通过设置可以解决在推迟到iframe大小之前，html标签上的大小。上面显示的内容似乎是该人员描述的同一问题的更一般情况。
This question: Element in iframe with height: 100% strech describes the same phenomenon, but that particular case is solvable for me by setting a size on the html tag before deferring to the iframe size. What I am showing above seems to be a more general case of the same issue described by that person.
推荐答案
您的iframe没有 doctype 这似乎是导致呈现问题。
Your iframe has no doctype which seems to be causing the rendering issues.
使用定义的文档类型构造iframe可以使您的页面和iframe：
Constructing your iframe with a defined doctype gives consistent rendering between your page and 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继承了父页面的doctype，但这似乎并非如此。也许别人可以详细说明一下？
I was under the impression that an iframe inherited the doctype of the parent page but this doesn't seem to be the case. Perhaps somebody else can elaborate?
这篇关于嵌入iframe时，CSS高度100％表现不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
