gpt4 book ai didi

html - 嵌入 iframe 时,CSS 高度 100% 的行为有所不同

转载 作者:行者123 更新时间:2023-11-28 04:47:09 31 4
gpt4 key购买 nike

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);

Updated jsfiddle

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

关于html - 嵌入 iframe 时,CSS 高度 100% 的行为有所不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40888566/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com