在HTML5中拉伸iframe
Arc*_*rus 10 iframe html5 doctype
我有两个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文档类型,所以我该如何解决这个问题呢？谢谢你的期待!
Šim*_*das 24
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/
- @Jay OP将IFRAME的高度设置为100%.此百分比与包含块有关 - 在本例中为BODY元素.但是,默认情况下,BODY元素的高度取决于其内容的高度.这是循环依赖 - BODY的高度取决于IFRAME的高度,反之亦然.显然,这不起作用.可以将BODY和HTML元素的高度设置为100% - 这将起作用.我更喜欢固定定位 - 它更灵活(可以精确定义位置和尺寸). (3认同)