CSS のみを使用してページの残りの高さを iframe で埋めるにはどうすればよいですか?

JavaScript を使用せずに Iframe の残りの高さをシームレスに埋める

バナーと iframe を含む Web ページをデザインする場合、iframe が必要になる場合があります。残りのページの高さ全体を占めるように自動的にサイズ変更されます。 CSS を使用してこれを実現することは可能です。

元々、iframe の高さを 100% に設定することは論理的であるように見えましたが、iframe がバナーの高さを含むページ全体を埋めようとする結果になりました。これにより、不要な垂直スクロールバーが表示されました。さらに、DIV の CSS マージンとパディングを使用して残りの高さを確保すると、DIV では機能しましたが、iframe では機能しませんでした。

2019 年の時点で、最適なソリューションは flexbox です。ブラウザー全体で幅広くサポートされています:

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

以上がCSS のみを使用してページの残りの高さを iframe で埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。