同じサイズのiframeで親divがスクロールするのはなぜですか？

Question

私は、100％の高さと親に等しいサイズ（ウェブインスペクタに従う）のiframeがスクロールバーを表示する理由を知りたいだけです。

このトピックに関するいくつかの質問がありましたが、回避策があるようですが、これまでのところ、これがどうして起こったのかについての説明はまだありません。

明確になる：私は解決策を探していません。私の質問は約なぜこれが起こるかについてです。私が試したブラウザ間で一貫しているように見えるので、私はこの見かけ上奇妙な振る舞いを説明するどこかのWeb標準があると仮定しています。

#content { 
 
    height: 90vh; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: lightblue; 
 
} 
 
iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: none; 
 
}

<div id="content"> 
 
    <div class="wrapper"> 
 
    <iframe></iframe> 
 
    </div> 
 
</div>

Answer 1

それはあなたの場合は

* { line-height: 0; } 

を使用し、それを表示したくない場合は、それはそれ

後に空白だ、スクロールバーを生成IFRAMEではありませんそれは動作しません。追加しようとすると

iframe { display: block; } 

もあります。 iframeはデフォルトでインライン要素として表示され（iframe = 'inline frame'）、問題の原因となる行の高さがあります。