iFrame填充core-header-panel

时间:2015-05-10 21:03:14

标签: javascript html css iframe polymer

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

我希望在核心工具栏下面的核心标题面板内部动态加载各种页面内容的iFrame。但是,加载有效,iFrame将无法填充核心标题面板的完整高度。我已经尝试将其高度设置为core-header-panel的高度,但返回null。标签本身和CSS中的高度= 100%不起作用。我不知道如何让它工作,但除了iFrame之外,我愿意接受另一种解决方案。宽度拉伸细,高度不缩放。我相信我正在使用聚合物0.8(今天早上刚下载)。

enter image description here

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

HTMLPastebin

JS for the site

cssPastebin

2 个答案:

答案 0 :(得分:1)

由于某些原因,您遇到了!DOCTYPE 的问题。 在doctype标签中测试这个... 尝试使用这样的东西!DOCTYPE html5。 然后你就可以控制身高了。

我不使用Polymer,因此您仍需要了解Doctype为何会向您提供此问题。 所以你可以使用正确的!Doctype。

但这有望帮助您找到解决问题的正确途径。

答案 1 :(得分:1)

尝试在Polymer layout documentation

上使用类似解释的布局属性

您可以使用某些属性,例如适合或水平。可能就像下面的

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