我正在使用经典的响应式设计技巧,将基于百分比的 padding-bottom
和零高度应用于元素,以使其保持一定的纵横比。该元素内部是一个高度为 100% 的 iframe。
这适用于 chrome,但 firefox 和 IE 不显示 iframe,就好像它没有高度一样。我曾尝试将 box-sizing: content-box
用作 IE 的解决方法,但它什么也没做。
fiddle :http://jsfiddle.net/jgsnK/
如何让 iframe 在其他浏览器中表现得像 chrome 一样?
最佳答案
您需要做的是使用 position:absolute;
和 position:relative;
在您的 上定位您的
iframe
.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
关于html - iframe 在父级内部的高度为零,没有高度和底部填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23829566/