html - iframe 在父级内部的高度为零，没有高度和底部填充

Question

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

这适用于 chrome，但 firefox 和 IE 不显示 iframe，就好像它没有高度一样。我曾尝试将 box-sizing: content-box 用作 IE 的解决方法，但它什么也没做。

fiddle :http://jsfiddle.net/jgsnK/

如何让 iframe 在其他浏览器中表现得像 chrome 一样？

Answer 1

您需要做的是使用 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