你如何给iframe 100％的身高

Question

我正在尝试

<iframe height="100%" ...>

但它仍然没有调整大小。当我在pixles中尝试高度时，它可以工作。

编辑：100％似乎正在使用IE而不是firefox

Answer 1

您可以使用CSS：

<iframe style="position: absolute; height: 100%; border: none"></iframe>

请注意，默认情况下会将其放在页面的左上角，但我想这就是您想要实现的目标。您可以使用left，right，top和bottom CSS属性进行排名。

Answer 2

iframe没有达到100％身高的问题不是因为它们很笨重。问题是，要让他们获得100％身高，他们需要父母拥有100％身高。如果其中一个iframe的父母不是100％高，那么iframe将无法超越父母的身高。

所以最好的解决方案是：

html, body, iframe { height: 100%; }

...鉴于iframe直接在正文下。如果iframe在其自身与正文之间有父级，则iframe仍将获得其父级的高度。必须明确地将每个父母的身高设置为100％（如果这是他们想要的）。

测试：

Chrome 30，Firefox 24，Safari 6.0.5，Opera 16，IE 7, 8, 9 and 10

PS：我并不是故意挑剔，但在撰写本文时，标记为正确的解决方案在Firefox 24上无效，但在Chrome 30上工作。但是没有在其他浏览器上测试过。我在Firefox上遇到了错误，因为我测试的页面内容非常少...... 可能是我的微小标记或CSS重置输出，但如果我遇到这个错误，我想接受的答案在每种情况下都不起作用。

Answer 3

iFrame属性不支持HTML5中的百分比。它只支持像素。 http://www.w3schools.com/tags/att_iframe_height.asp