如何在 Firefox 中制作包含 div 的 iframe 100% 高度？
Posted
技术标签:
【中文标题】如何在 Firefox 中制作包含 div 的 iframe 100% 高度？【英文标题】：How do I make an iframe 100% height of a containing div in Firefox? 【发布时间】：2012-04-06 16:26:33 【问题描述】：我在弄清楚如何在 Firefox 和 IE 中将 iframe 扩展到 100% 的容器元素时遇到了一些麻烦（它在 Chrome 中运行良好）。通过四处搜索，必须在包含的 div 上指定一个高度（可能还有 body 和 html）是有道理的。但是，我已经这样做了，并且 iframe 仍然没有扩展。是否所有的父 div 都必须有一个指定的高度和位置才能工作，或者只是包含父级？对此的任何修复将不胜感激！
这是我所拥有的：
<!DOCTYPE html>
<html>
<head>
<style>
html, body margin:0; padding:0; height:100%
#container width: 1000px; min-height: 550px; position: relative
#smallContainer position:relative /*no height specified*/
#iframeContainer height: 100%; position: relative
#iframe height: 100%; width: 100%; display: block
</style>
</head>
<body>
<div id="container">
<div id="smallContainer">
<div id="iframeContainer">
<iframe id="iframe" src="foo.com"></iframe>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
对不起，我不小心在问题中提到了宽度，但我真正的意思是高度。我已经编辑以反映这一点。 【参考方案1】：试试这个 Jquery 脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
var height = window.innerHeight;
$(document).ready( function()
$('iframe').css('height', height)
);
</script>
【讨论】：
您没有调整大小的支持。【参考方案2】：您可能需要结合..
$(function()
var height = window.innerHeight;
$('iframe').css('height', height);
);
//And if the outer div has no set specific height set..
$(window).resize(function()
var height = window.innerHeight;
$('iframe').css('height', height);
);
【讨论】：
以上是关于如何在 Firefox 中制作包含 div 的 iframe 100% 高度？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Firefox 中隐藏滚动条而不停止在 div 中滚动
Div 100% 高度适用于 Firefox，但不适用于 IE