iframe 高度设置为 100% 没有任何结果 - 使用 Firefox v14答案

【问题标题】：iframe height set to 100% without any result - using Firefox v14iframe 高度设置为 100% 没有任何结果 - 使用 Firefox v14
【发布时间】：2012-08-06 00:40:58
【问题描述】：

我目前正在编写一个代码，我已将 iframe 的高度设置为 100%，但它似乎根本不起作用。我试图从中删除不必要的代码来演示问题，在此处查看代码（注意内联 css）：http://jsfiddle.net/VfKqR/

这里是：

<!-- Start full page container -->
<div style="min-width: 830px; width: 100%; height: 100%; float: left;">

<!-- Start scoop menu -->
<div style="width: 188px; float: left;">

<table>
    <thead>
    <tr>
        <td>

<a href="http://rambler.ru" target="scoop" style="font-size:13px; letter-spacing: 0.7px; font-weight: bold;">Link tester</a>

        </td>
    </tr>
    </thead>
</table>

<!-- End scoop menu -->
</div>

<!-- spacer between divs -->
<div style="width: 20px; float: left;">&nbsp;</div>

<!-- Start iframe -->
<div style="min-width: 622px; width:74%; height: 100%; float: left;">

<iframe id="scoop" name="scoop" src="http://www.yahoo.com" style="border:0px #FFFFFF none;" name="myiframe" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%">

<!-- End iframe -->
</div>

<!-- End full page container -->
</div>

我似乎无法将高度固定为 100%。我在这里错过了什么？

编辑：我刚刚在 Safari 中进行了测试，它运行良好，但是在最新版本的 Firefox (v14.0.1) 中，它不起作用。

【问题讨论】：

你在什么浏览器上测试它？ Chrome 似乎可以正常工作。
我试图让 100% 的用户屏幕。宽度设置为 100% 时的工作方式相同。我正在使用 FireFox v14。
如果你添加html,body{height:100%}，它也会一直在FF中，但你的窗口将被限制在视口大小。
事实证明，在 FF 中，您必须确保 iframe 的所有周围元素也必须具有 height:100%（包括父 html 元素）

标签： html iframe styles height

【解决方案1】：

查看我的解决方案 Setting iframe to take remaining space in page 没有任何 JS。

您最有可能需要清除一些float（因为这些是 iFrame 无法扩展的原因），并且您很可能需要稍微重构您的代码。

希望对您有所帮助。

【讨论】：

【解决方案2】：

为 JAVASCRIPT 更新

javascript：

<script type="text/javascript">
var sheet = document.createElement('style')
sheet.innerHTML = "html, body{height: 100%;}";
document.head.appendChild(sheet);
</script>

html:

<div style="min-width: 622px; width:74%; height: 100%; float: left;">......

【讨论】：

是否可以在正文中添加 html, body{height: 100%;} 内联？我正在为不允许我编辑标题或使用样式表的 CMS 开发此功能（这就是我使用内联 CSS 的原因）。
您不能在文档中使用样式标签吗？ <style type="text/css">html, body{height:100%;}</style>
不，很遗憾，我只能编辑 body 标签。我还剩下什么解决方案？
改变了我的答案，只要这个 CMS 允许你执行 javascript 就应该可以工作 :)

【解决方案3】：

您可以使用我刚刚编写的这个小 jquery 脚本来实现它：

jQuery(document).ready(function(){var height = $(window).height();
            $('iframe').css('height', height)
        });

http://jsfiddle.net/VurLy/

【讨论】：

这是一个非常有趣的方法，解决了我的问题。但是，它似乎不了解我当前窗口的高度，只了解我的分辨率。有什么方法可以调整它以使其符合我的屏幕尺寸？
或者让它达到 90% 而不是 100%？
它遵循浏览器窗口的大小，嗯，至少在这里。但是，如果您希望高度与父元素匹配，您宁愿使用这样的东西：jQuery(document).ready(function(){var height = innerHeight(#perentelementid); $('iframe').css('height', height) }); 但是父元素/包装器必须声明高度值。
我的意思是父元素/包装器必须有明确的值（没有百分比）。