iFrame 填充核心标题面板内的 div答案

【问题标题】：iFrame to Fill div inside core-header-paneliFrame 填充核心标题面板内的 div
【发布时间】：2015-05-10 21:03:13
【问题描述】：

我最近开始使用 Polymer 为自己构建一个流体材料设计网站，但遇到了一些问题。

我想要一个 iFrame，它在核心工具栏下方的核心标题面板内动态加载各种页面内容。加载工作，但是，iFrame 不会填满 core-header-panel 的完整 height。我尝试将其高度设置为 core-header-panel 的高度，但返回 null。标签本身和 CSS 中的 height=100% 都不起作用。我不知道如何让它工作，但我对 iFrame 之外的替代解决方案持开放态度。宽度拉伸很好，高度不缩放。我相信我正在使用聚合物 0.8（今天早上刚刚下载）。

附加的是高度设置为 100% 的结果。使用其他所有方法都会产生类似的结果。

HTMLPastebin

JS for the site

cssPastebin

【问题讨论】：

与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?。顺便说一句，这是“提前致谢”，而不是“在先致谢”。

标签： javascript html css iframe polymer

【解决方案1】：

您似乎在使用 !DOCTYPE 时遇到了问题。测试这个......在 doctype 标记中。尝试使用类似 !DOCTYPE html5 的内容。然后你就可以控制高度了。

我不使用 Polymer，因此您仍然需要找出 Doctype 给您这个问题的原因。所以你可以使用正确的 !Doctype。

但这有望让您走上纠正问题的正确道路。

【讨论】：

【解决方案2】：

尝试使用 layout 属性，例如 Polymer layout documentation 上的说明

您可以使用一些属性，例如适合或水平。大概像下面这样

<div class="content" horizontal layout>
            <iframe height="100%" frameborder="0" width="100%"></iframe>
</div>

【讨论】：