JavaScript を使用せずに iframe をコンテナの残りの高さを満たすようにするにはどうすればよいですか?

JavaScript を使用せずにコンテナの残りの高さに 100% フィットするように iframe を作成します

バナーと iframe の両方を含む Web ページをデザインする場合、iframe が自動的に配置されるレイアウトを実現します残りの高さを埋めるように調整すると、課題が生じる可能性があります。

初期

iframe の高さを「100%」に設定してみるのが簡単な解決策のように思えます。ただし、このアプローチでは、バナー領域を含むページの高さ全体を埋めようとします。その結果、不要な垂直スクロールバーが表示されます。

CSS マージンとパディングの使用

CSS マージンとパディングは DIV 要素の残りの高さを効果的に埋めることができますが、この戦略は期待どおりに機能しませんiframes.

解決策

この問題を解決するには、このシナリオに信頼できるソリューションを提供する CSS レイアウト モジュールである 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>

このフレックスボックス レイアウトにより、バナー (.first-row) の高さが固定され、iframe (.second-row) が拡張されて幅いっぱいになります。残りの高さ。 「flex-grow」プロパティは、利用可能なスペースを占めるように iframe を拡大するように指示します。

この手法により、iframe がコンテナの残りの高さの 100% になり、ブラウザのサイズ変更にシームレスに適応します。

以上がJavaScript を使用せずに iframe をコンテナの残りの高さを満たすようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。