我使用了经典的响应式设计技巧,即对元素应用基于百分比的padding-bottom
和零高度,以使其保持一定的长宽比。在这个元素中有一个iframe,其高度为100%。
这在chrome中是可行的,但是firefox和IE没有显示iframe,好像它没有高度一样我试过将box-sizing: content-box
作为IE的解决方案,但没有成功。
小提琴:http://jsfiddle.net/jgsnK/
如何使iframe在其他浏览器中的行为与chrome相似?
最佳答案
你需要做的是在你的iframe
上使用position:absolute;
和position:relative;
来定位你的.wrapper
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.frame {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
width: 100%;
height: 100%;
}
看看这个DEMO
进一步:
如果您计划在整个文档中定期执行这样的操作,我建议添加一个内部
div
来执行相同的功能,并使您的iframe
没有绝对的位置HTML格式
<div class="wrapper">
<div class="abs-inner">
<iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe>
</div>
</div>
CSS
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.abs-inner{
position:absolue;
top:0;
right:0;
left:0;
bottom:0;
}
.frame {
width: 100%;
height: 100%;
}
像这样的DEMO