要在 core-header-panel 内填充 div 的 iFrame

Question

我最近开始使用 Polymer 为自己构建一个流畅的 material 设计网站，但我运行遇到了一些问题。

我想要一个 iFrame，它在 core-header-panel 内动态加载各种页面的内容，位于 core-toolbar 下方。加载有效，但是，iFrame 不会填充 core-header-panel 的完整高度。我试过将其高度设置为 core-header-panel 的高度，但返回的是空值。标签本身和 CSS 中的 height=100% 都不起作用。我不知道如何让它工作，但我愿意接受 iFrame 之外的替代解决方案。宽度拉伸良好，高度不缩放。我相信我正在使用 polymer 0.8（今天早上刚下载）。

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

HTMLPastebin

JS for the site

cssPastebin

Answer 1

您似乎出于某种原因遇到了 !DOCTYPE 的问题。测试这个...在文档类型标签中。尝试使用类似这样的东西！DOCTYPE html5。然后你就可以控制高度了。

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

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

Answer 2

尝试使用 Polymer layout documentation

中解释的布局属性

您可以使用一些属性，例如 fit 或 horizontal。大概像下面这样

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

要在 core-header-panel 内填充 div 的 iFrame

iFrame to Fill div inside core-header-panel

html

javascript

css

iframe

polymer