如何使用 HTML IFrame 进行自动宽度答案

【问题标题】：How to do auto-width with HTML IFrame如何使用 HTML IFrame 进行自动宽度
【发布时间】：2014-06-06 18:05:01
【问题描述】：

我正在尝试使用 iframe 打开其他 URL。但出于某种原因，iframe 的宽度固定为 155px。

我需要调整 iframe 的宽度以适应整个 SRC iframe。

<!DOCTYPE html>
<html>
    <body>
        <iframe frameborder="0" scrolling="no" height="100%" width="100%" src="http://www.gnu.org/"></iframe>
    </body>
</html>

我尝试了 width="100%"，但没有成功。

【问题讨论】：

标签： html iframe

【解决方案1】：

你应该可以用 CSS 做到这一点

例如。

style="width:100%"

我刚刚将您的 HTML 粘贴到小提琴中。它按预期工作。您是否有任何 css 覆盖了宽度，或者它是否在您实际使用它的 155px 宽的容器内？

这至少对我有用。

【讨论】：

无 CSS。而且我还尝试了 jsfiddle，得到了相同的结果。

【解决方案2】：

试试这个：

    <iframe 
        src="http://www.gnu.org/" 
        frameborder="0"
        scrolling="no" 
        style="overflow:hidden;height:100%;width:100%" 
        height="100%" 
     width="100%"></iframe>

【讨论】：

您能解释一下为什么您的解决方案可以解决问题吗？
没用。但高拉夫的反应很好。我认为它缺少 CSS 到 HTML 和 Body。

【解决方案3】：

Demo

html, body {
    height:100%;
    width:100%;
    margin:0;
}
.h_iframe iframe {
    width:100%;
    height:100%;
}
.h_iframe {
    height: 100%;
    width:100%;
}

HTML

<div class="h_iframe">
    <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>

【讨论】：

优秀的解决方案！

【解决方案4】：

这在没有 css 的情况下工作：

<iframe src="link-goes-here" frameborder="0" scrolling="no" style="overflow:hidden; height:100%; width:100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0;" height="100%" width="100%"></iframe>

【讨论】：

style="..." 中的所有内容仍然是 CSS，您只是将其内联在 HTML 中，而不是将其单独放置在外部样式表中。