CSS 如何在 Firefox 中制作包含 div 的 iframe 100% 高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9816703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an iframe 100% height of a containing div in Firefox?
提问by David
I'm having some trouble figuring out how to extend an iframe to 100% of it's container element in Firefox and IE (it works fine in Chrome). From searching around, it makes sense that there has to be a height specified on the containing div (and possibly body and html as well). However, I have done that, and the iframe is still not extending. Do all of the parent divs have to have a specified height and position for this to work, or just the containing parent? Any fix for this would be greatly appreciated!
我在弄清楚如何在 Firefox 和 IE 中将 iframe 扩展到其容器元素的 100% 时遇到了一些麻烦（它在 Chrome 中工作正常）。通过四处搜索，必须在包含的 div（可能还有 body 和 html）上指定一个高度是有道理的。但是，我已经这样做了，并且 iframe 仍然没有扩展。是否所有父 div 都必须具有指定的高度和位置才能使其工作，或者只是包含父级？对此的任何修复将不胜感激！
Here's what I have:
这是我所拥有的：
<!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>
回答by Robin Maben
You might need a combination of..
您可能需要组合...
$(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);
});
回答by sujal
Try this Jquery script
试试这个 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>
