在HTML5中扩展iframe

前端之家收集整理的这篇文章主要介绍了在HTML5中扩展iframe前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个html文件,一个包含一个iframe,我想让这个iframe在父html的整个高度上伸展.

所以第一个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>

第二(有蓝色背景):

<!DOCTYPE html>
<html>    
<body style="background-color: blue;" />
</html>

如果所有的东西都是正确的,我希望看到只有一个蓝色的背景,因为iframe应该与整个父页面重叠,但我只看到一条蓝色的,一大堆的红色..

使用HTML5 doctype<!DOCTYPE html>我似乎得不到正确的结果:

如果我删除了HTML5文档,我得到了我想要的结果.我认为这是因为它会以简单的方式呈现HTML:

我确实想要HTML的doctype,那么我该如何解决这个问题?谢谢你的看!

解决方法

CSS:
#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }

HTML:

<div id="wrap">
    <iframe src="..." frameborder="0" id="iframe"></iframe>
</div>

现场演示:http://jsfiddle.net/5G5rE/show/

猜你在找的HTML5相关文章