【问题标题】：HTML iframe won't get tallerHTML iframe 不会变高
【发布时间】：2014-09-02 06:26:16
【问题描述】：

尝试使用 iFrame # 将博客嵌入到我们的 html 网站中：

<h1 class="title">All the latest...</h1>
</br>
</div>
    </div>
        </div>
        <iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
        <p>Your browser does not support iframes.</p>
        </iframe>

我尝试将高度更改为 100%、自动甚至许多固定宽度，但是 iframe 的高度保持不变！有什么帮助吗？

提前致谢，

艾丹

【问题讨论】：

how to make a html iframe 100% width and height? 的可能重复项

标签： html iframe

【解决方案1】：

如果您使用百分比，则包含元素必须具有高度，否则 iFrame 将不知道该百分比的基础。如果你给 body 100% 高度，然后给 iFrame 100% 高度，它将填满窗口的整个高度。

此外，我建议不要使用内联 CSS，而是将 CSS 规则放入 CSS 文件中。

HTML：

<body>
<iframe src ="http://inspireacademy.tumblr.com">
    <p>Your browser does not support iframes.</p>
</iframe>
</body>

CSS：

body {
    height:100%;
}
iframe {
    height:100%;
    width:100%;
}

JSFiddle

【讨论】：

【解决方案2】：

您必须设置包含 div 的高度。高度自动使用元素所在的容器来设置高度。高度仅在容器中时以百分比形式起作用。

<h1 class="title">All the latest...</h1></br>
</div>
    </div>
        </div>
        <div style="height:400px;">
            <iframe src ="http://inspireacademy.tumblr.com" width="100%" height="auto">
                <p>Your browser does not support iframes.</p>
            </iframe>

然后它将扩展到容器。

【讨论】：