Iframe で残りのページの高さを CSS のみで動的に埋めるにはどうすればよいですか?

CSS を使用した iframe の動的ページ高さ管理

質問:

次の iframe を実現するWeb ページの残りの高さをシームレスに埋め、ブラウザのサイズ変更に自動的に調整します。挑戦的であることが証明されました。 height:100% およびマージン/パディング技術を使用しようとしても、iframe がヘッダーを含むページの高さ全体を占有しようとするため、不要な垂直スクロールバーが表示され続けます。この問題は CSS だけでどのように解決できますか?

回答:

2019 年更新:

Flexbox は、この問題に対して最も信頼性が高く、広くサポートされているソリューションとして浮上しました。 dilemma.

CSS コード:

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; }

HTML 構造:

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

フレックスボックスを実装すると、iframeヘッダーの下の残りのスペースを埋めるために自動的に拡張されます。ブラウザ ウィンドウのサイズが変更されると高さが動的に調整され、応答性が高く、見た目に美しいレイアウトが保証されます。

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