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

【问题标题】：iframe has zero height inside parent with no height and bottom paddingiframe 在父级内部的高度为零，没有高度和底部填充
【发布时间】：2014-05-26 17:08:31
【问题描述】：

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

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

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

如何使 iframe 在其他浏览器中的行为与 chrome 中的一样？

【问题讨论】：

标签： html css iframe responsive-design

【解决方案1】：

您需要做的是在您的.wrapper 上使用position:absolute; 和position:relative; 定位您的iframe

.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

【讨论】：

【解决方案2】：

height: 100%; 表示将元素的高度与其父元素的高度匹配，即0px。您可以使用相对 + 绝对定位来实现所需的结果，即将高度与元素的高度相匹配并加上填充：

.wrapper {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}
.frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Demo here

注意：要获得像素完美的结果，您可能需要将 iframe 上的 marginwidth、marginheight 和 frameborder 属性置零。

【讨论】：