在HTML5中扩展iframe [英] Stretching iframe in HTML5
问题描述
我有两个html文件，其中一个包含另一个包含iframe的文件，并且我想让这个iframe延伸到父html的整个高度。
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文件（有红色背景）看起来像：
So the first html file (which has a red background) look like:
<!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>
如果所有的东西都是正确的，我希望只看到一个蓝色背景，因为iframe应该重叠整个父类型页面，但我只看到一条蓝色和一大片红色。
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..
使用HTML5文档类型<！DOCTYPE html> ; 我似乎无法得到正确的结果：
With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:
如果我删除HTML5文档类型，我会得到我想要的结果。我认为这是因为它会以怪癖模式渲染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:
我确实需要HTML doctype，所以我该如何解决这个问题？
I do want the HTML doctype though, so how can I fix this? Thanks for looking!
推荐答案
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>
现场演示： http://jsfiddle.net/5G5rE/show/
这篇关于在HTML5中扩展iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
