iframe在父级内部没有高度,没有高度和底部填充

Question

我正在使用经典的响应式设计技巧,将基于百分比padding-bottom和零高度应用于元素,以使其保持一定的宽高比.在此元素内部是一个高度为100%的iframe.

这适用于chrome,但firefox和IE不会显示iframe,就像它没有高度一样.我曾尝试将其box-sizing: content-box作为IE的变通方法应用,但它没有做任何事情.

小提琴:http://jsfiddle.net/jgsnK/

如何让iframe在其他浏览器中的行为与chrome相似？

Answer 1

什么你需要做的是你的位置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