iFrame高度被忽略

Question

我正在使用此页面： http://icelandwithkids.com/2016/02/11/do-i-need-a-4wd-awd-4x4-car-in-iceland/

有一个提供Google地图的iFrame：

<iframe width="100%" height="500" src="https://www.google.com/maps/embed?pb=!1m24!1m8!1m3!1d901747.8867442308!2d-19.44933680502082!3d63.804830147198125!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x48d74a424936b0d1%3A0xbe83531b006d778d!2sVik%2C+Iceland!3m2!1d63.4186315!2d-19.0060479!4m5!1s0x48d11a6e58c79679%3A0x48dc5b5397a88a8d!2sSveinstindur%2C+Iceland!3m2!1d64.1069444!2d-18.4166667!5e0!3m2!1sen!2sus!4v1455105815201/" scrolling="yes" class="iframe-class" frameborder="0"></iframe>

无论我做什么，iFrame的高度都不会改变 - 它被卡在一个非常小的高度。我尝试过使用perentage;我在this page找到了一些风格的东西。但似乎没有任何区别。

我认为页面上的某些CSS阻止了iFrame高度选项的使用？

感谢您的帮助。

Answer 1

另一种可能性是iframe位于div或其他限制大小的容器内。尝试增加iframe所在容器的大小。

Answer 2

因为在CSS中你有：

auto !important

无论你做什么，这都会迫使它自动化。

此外，您还有一个外部文件，它还将iframe的高度设置为cache.skin.css

{{1}}

删除它们然后你可以设置你想要的高度。