Stretching iframe in HTML5

2019-02-04 20:43发布

站内文章 / Html5
44 0 0

问题:

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.

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>

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..

With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:

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:

I do want the HTML doctype though, so how can I fix this? Thanks for looking!

回答1:

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>

Live demo: http://jsfiddle.net/5G5rE/show/



标签： html5 iframe doctype
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~