iframe高度150px但div容器更大

Question

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

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

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

在内部，我有另一个<div>，其高度为auto，其中<iframe>的高度为100％。

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

但由于某些原因，在chrome中，iframe的最大高度为150px，无论身高或最大高度，我都会给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>

Answer 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>