CSS のみを使用して、コンテナーの残りの高さを iframe で埋めることはできますか?

コンテナの残りの高さの 100% に合わせて iframe を作成する

問題:

バナーと iframe を使用する場合、ブラウザのサイズ変更に応じて iframe が残りのページの高さを自動的に埋めることが望ましいです。これは JavaScript を使わずに CSS のみで実現可能ですか?

解決策:

2019 年に、このシナリオに最適なソリューションとして flexbox が登場しました。フレックスボックスは、ブラウザ間で優れたサポートを提供し、ページ要素のレイアウトを制御する効果的な手段を提供します。

フレックスボックスを使用すると、親コンテナの高さと幅の両方が 100% のサイズになるように定義できます。方向を列に設定します。これにより、要素が垂直に配置されます。

親コンテナ内に 2 つの行を作成します:

1. 最初の行: 固定の高さ、または高さを決定するコンテンツを指定します。 .
2. 2 行目: flex-grow プロパティを 1 に設定して、残りのスペースを埋めるように展開されます。

コード スニペット:

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>

この設定では、2 行目の iframe が自動的に表示されます。ブラウザのサイズを変更しても、ページ内の残りのスペースを占めるように高さを調整します。

以上がCSS のみを使用して、コンテナーの残りの高さを iframe で埋めることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。