Html 在 HTML5 中拉伸 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7011602/
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
Stretching iframe in HTML5
提问by Arcturus
I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.
我有两个 html 文件，一个包含另一个带有 iframe 的文件，我想让这个 iframe 延伸到父 html 的整个高度。
So the first html file (which has a red background) look like:
所以第一个 html 文件（红色背景）看起来像：
<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
<iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" />
</body>
</html>
The second (which has a blue background):
第二个（蓝色背景）：
<!DOCTYPE html>
<html>
<body style="background-color: blue;" />
</html>
If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..
如果一切都正确，我希望只看到蓝色背景，因为 iframe 应该与整个父页面重叠，但我只看到一条蓝色和一大堆红色。
With the HTML5 doctype <!DOCTYPE html>I cannot seem to be getting the correct result:
使用 HTML5 doctype<!DOCTYPE html>我似乎无法得到正确的结果：
If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:
如果我删除 HTML5 文档类型，我会得到我想要的结果。我认为这是因为它会以 quirks 模式呈现 HTML：
I do want the HTML doctype though, so how can I fix this? Thanks for looking!
我确实想要 HTML 文档类型，那么我该如何解决这个问题？感谢您的关注！
回答by ?ime Vidas
CSS:
CSS：
#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }
HTML:
HTML：
<div id="wrap">
<iframe src="..." frameborder="0" id="iframe"></iframe>
</div>
Live demo:http://jsfiddle.net/5G5rE/show/
现场演示：http : //jsfiddle.net/5G5rE/show/
