html - iframe 高度 150px 但 div 容器更大

Question

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

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

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

里面还有一个<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

Percentages The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

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