iframeの高さは150pxだがdivコンテナは大きい

Question

私は非常に奇妙な問題を抱えており、十分理解できないものがあることを意味すると思います。

私は問題を簡単に見つけるために例を単純化していますが、実際これは非常に大きなウェブサイトの一部です。

外側の<div>の絶対位置は、上下から10pxです。私の理解には、それは正確な高さ（画面 - 20ピクセル）を持っていることを意味します。

内部私は別の<div>を持っています。これは、高さがautoであり、高さが100％のです。

私の推論は、それが私にiframeのページの高さ全体を与えなければならないということです。

しかし、何らかの理由で、iFrameに与えた高さや高さに関係なく、クロムのiframeの最大高さは150pxです。

私が期待したとおりに動作するようにするには、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

パーセンテージパーセンテージは 生成ボックスの包含ブロックの高さに対して計算されます。 ブロックの高さが明示的に指定されていない場合（つまり、内容が の高さに依存する）、この要素は絶対的に配置されていない場合、値 はautoに計算されます。ルート要素のパーセンテージの高さは、最初の包含ブロックに対する相対的な です。

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