忽略 iFrame 高度

Question

我正在处理这个页面： http://icelandwithkids.com/2016/02/11/do-i-need-a-4wd-awd-4x4-car-in-iceland/

有一个提供谷歌地图的 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 的高度都不会改变——它被困在一个非常小的高度。我试过使用百分比；正如我在this page 上发现的那样，我尝试了一些风格的东西。但似乎没有什么不同。

我假设页面上其他地方的某些 CSS 阻止使用 iFrame 高度选项？

感谢您的帮助。

Answer 1

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

Answer 2

因为在你的 CSS 中你有：

embed,iframe,object,video{
    height:auto !important
}

无论你做什么，这都会强制它自动运行。

您还有一个外部文件，该文件还将 iframe 的高度设置为 auto !important

cache.skin.css

删除那些，然后你可以设置你想要的任何高度。