iframe 高度 150px 但 div 容器更大答案

【问题标题】：iframe height 150px but div container is largeriframe 高度 150px 但 div 容器更大
【发布时间】：2017-08-24 03:45:37
【问题描述】：

我遇到了一个非常奇怪的问题，我想这意味着我对某些东西还不够了解。

我正在简化示例以便于查找问题，但实际上这是一个非常大的网站的一部分。

外部<div> 有一个绝对位置，距离顶部和底部10px。据我了解，这意味着它具有精确的高度（屏幕 - 20px）。

在里面我有另一个<div>，其高度为auto，其中一个<iframe> 高度为100%。

我的理由是它应该给我 iframe 页面的整个高度。

但由于某种原因，在 chrome 中，iframe 的最大高度为 150 像素，无论我给 iframe 提供什么高度或最大高度。

为了让事情变得更奇怪，在 IE 中它按我的预期工作。

我检查了 chrome devtools，它显示 150px 没有来源。

搜索 SO 向我展示了许多类似的问题，但没有令人满意的答案，因为我设置了外部 div 大小。

有什么建议可以解决这个问题吗？

.body {
  position: absolute;
  top: 10px;
  bottom: 10px;
}

.inner {
  height: auto;
}

<div class="body">
  <div class="inner">
    <iframe src="https://jsfiddle.net" style="height:100%">
    
    </iframe>
  </div>
</div>

【问题讨论】：

【解决方案1】：

HEIGHT

百分比百分比是相对于高度计算的生成框的包含块。如果包含的高度块没有明确指定（即，它取决于内容高度），并且这个元素不是绝对定位的，值计算为自动。根元素上的百分比高度是相对的到初始包含块。

.body {
  position: absolute;
  top: 10px;
  bottom: 10px;
}

.inner {
  height: 100%;
}

<div class="body">
  <div class="inner">
    <iframe src="https://jsfiddle.net" style="height:100%">
    
    </iframe>
  </div>
</div>

【讨论】：