☰

コンテナの残りの高さの100%にiframeを合わせる 質問する

tag-icon • tag-icon html css iframe
コンテナの残りの高さの100%にiframeを合わせる 質問する

バナーと iframe を含む Web ページをデザインしたいと考えています。iframe がページの残りの高さをすべて埋め、ブラウザーのサイズが変更されると自動的にサイズが変更されることを期待しています。JavaScript コードを記述せずに、CSS のみでこれを実現することは可能ですか?

iframe に設定してみましたがheight:100%、結果はかなり近いものでしたが、iframe は30pxバナーの div 要素の高さを含めてページ全体の高さを埋めようとしたため、不要な垂直スクロールバーが表示されました。完璧ではありません。

私は、Web ページの残りの高さ全体を占有するために、DIV の CSS margin、padding 属性を試しましたが、このトリックは iframe では機能しませんでした。

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>

ベストアンサー1

2019年の更新

TL;DR:現在、最良の選択肢はflexboxです。すべてがこれをうまくサポートしており、何年もサポートしてきました。これを選択すれば、後悔することはありません。以下は 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>

この回答の残りは学習と歴史的な理由のために残されています。

重要なのは、100% が何から取られているかを理解することです。CSS 仕様を読むことがその助けになります。

簡単に言うと、「包含ブロック」というものがありますが、これは必ずしも親要素である必要はありません。簡単に言うと、position:relative または position:absolute を持つ階層の最初の要素です。他に何もない場合は、body 要素自体です。したがって、「width: 100%」と指定すると、「包含ブロック」の幅がチェックされ、要素の幅が同じサイズに設定されます。そこに何か他のものがある場合は、「包含ブロック」の内容がそれ自体よりも大きくなる可能性があります (つまり、「オーバーフロー」します)。

高さも同様に機能します。 ただし、1 つの例外があります。高さをブラウザ ウィンドウの 100% にすることはできません。100% を計算できる最上位の要素は body (または html? よくわかりません) 要素であり、その内容が収まる程度に伸びます。これに height:100% を指定しても効果はありません。100% を計測する「親要素」がないためです。ウィンドウ自体はカウントされません。;)

何かをウィンドウの 100% に正確に拡大するには、次の 2 つの選択肢があります。

  1. JavaScriptを使用する
  2. DOCTYPE は使用しないでください。これは良い方法ではありませんが、ブラウザを「Quirks モード」に設定し、要素に height="100%" を設定すると、要素がウィンドウ サイズに合わせて拡大されます。DOCTYPE の変更に対応するために、ページの残りの部分も変更する必要がある可能性があることに注意してください。

更新:これを投稿した時点ですでに間違っていたかどうかはわかりませんが、これは確かに今では時代遅れです。今日では、スタイルシートでこれを行うことができます。html, body { height: 100% }そして、それは実際にビューポート全体に広がります。DOCTYPE を使用する場合でもmin-height: 100%、状況によっては役立つ場合があります。

また、Quirks モードのドキュメントを作成することもお勧めしません。これは、問題を解決するよりも、はるかに多くの問題を引き起こすからです。ブラウザーごとに異なる Quirks モードがあるため、ブラウザー間でページの外観を一貫して維持することは、桁違いに難しくなります。DOCTYPE を使用してください。常に。できれば HTML5 のものを使用してください<!DOCTYPE html>。覚えやすく、10 年前のブラウザーでも問題なく動作します。

唯一の例外は、IE5 などをサポートしなければならない場合です。その場合、いずれにしても自分で対処しなければなりません。これらの古いブラウザは、今日のブラウザとはまったく異なります。ここで紹介するちょっとしたアドバイスが、それらのブラウザの解決に役立ちます。良い面としては、その場合、おそらく 1 種類のブラウザだけをサポートすればよく、互換性の問題はなくなります。

幸運を！

更新 2:やあ、ずいぶん時間が経ったね! 6 年経って、新しいオプションが登場した。下のコメントで議論したところだが、今日のブラウザーで機能するトリックがさらにある。

オプション 1 - 絶対配置。最初のパーツの正確な高さがわかっている場合に最適です。

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>

注記:second-rowコンテナーが必要なのはbottom: 0、 がright: 0何らかの理由で iframe 上で動作しないためです。 が「置換」要素であることと関係があります。 ただしwidth: 100%、 はheight: 100%問題なく動作します。はデフォルトで要素display: blockであるため必要であり、inlineそうしないと空白によって奇妙なオーバーフローが発生し始めます。

オプション 2 - テーブル。最初の部分の高さがわからない場合に有効です。実際の<table>タグを使用することも、 を使用した派手な方法を使用することもできますdisplay: table。最近は後者が流行っているようなので、後者を選択します。

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <div class="second-row">
    <iframe src="https://jsfiddle.net/about"></iframe>
  </div>
</div>

注意: はoverflow: auto、行に常にすべてのコンテンツが含まれるようにします。そうしないと、フローティング要素がオーバーフローすることがあります。2height: 100%行目の は、最初の行をできるだけ小さく圧縮しながら、2 行目が最大限に拡張されるようにします。

推奨: オプション 3 - 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>

いくつか注意点があります - は、この場合overflow: hiddenでも iframe が何らかのオーバーフローを生成するためですdisplay: block。フルスクリーン表示やスニペット エディターでは表示されませんが、小さなプレビュー ウィンドウには追加のスクロール バーが表示されます。それが何なのかわかりません。iframe は奇妙です。

おすすめ記事