BinaryDevelop
  1. ホーム
  2. ハイパーリンク

[解決済み】Iframeをコンテナの残り高さの100%にフィットさせる

2022-03-29 02:24:58

質問

バナーとiframeを使ったWebページをデザインしたい。iframeが残りのページの高さをすべて埋め、ブラウザのサイズ変更に伴って自動的にサイズ変更されることを希望します。JavaScriptのコードを書かずに、CSSだけで実現することは可能でしょうか？

を設定しようとしました。 height:100% を含むページ全体の高さを埋め尽くそうとします。 30px の高さが足りないため、不要な縦スクロールバーが表示されてしまいます。完璧ではありません。

DIVのCSS margin, padding属性で、Webページの残りの高さをすべて占有することに成功しましたが、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>

解決方法は？

2019年のアップデートについて

TL;DR。 今日、最良の選択肢は-。 フレックスボックス . すべてのものがうまくサポートしていますし、何年も前からそうでした。もう振り返らないでください。フレックスボックスのコード サンプルを以下に示します。 

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の仕様書を読むと、そこそこ役に立ちます。

長い話を短くすると、quot;containing block"というものがあり、これは必ずしも親要素である必要はないのです。簡単に言うと、position:relativeまたはposition:absoluteを持つ、階層上の最初の要素です。他に何もない場合は、body 要素そのものです。つまり、"width: 100%" と言うと、"containing block" の幅をチェックして、あなたの要素の幅を同じサイズに設定するのです。もし、他に何かがあった場合、自分よりも大きなブロックの内容が表示されるかもしれません（つまり、オーバーフローします）。

高さも同じように動作します。 ただし、1つだけ例外があります。ブラウザウィンドウの100%まで高さを確保することはできません。100%を計算できる最上位の要素はbody(またはhtml?)要素で、この要素はそのコンテンツを含むのに十分な大きさになります。この要素にheight:100%を指定しても、100%を計算するための親要素がないため、何の効果もありません。ウィンドウ自体はカウントされません。）

何かをウィンドウのちょうど100%に引き伸ばすには、2つの選択肢があります。

  1. JavaScriptを使用する
  2. DOCTYPEは使わないでください。これは良い習慣ではありませんが、ブラウザをquot;quirksモードにし、要素にheight="100%"を指定すると、ウィンドウサイズに合わせてそれらを引き伸ばすことができるようになります。DOCTYPEの変更に対応するために、おそらくページの残りの部分も変更しなければならないことに注意してください。

アップデート これを投稿した時点で既に間違っていなかったのかどうかは分かりませんが、確かにこれはもう時代遅れですね。今日、あなたはスタイルシートでこれを行うことができます。 html, body { height: 100% } で、実際にビューポート全体に引き伸ばされます。DOCTYPEを使っても min-height: 100% も、状況によっては有効でしょう。

そして、私 Quirks-modeのドキュメントを作ることは誰にも勧めません。 なぜなら、解決するよりも頭痛の種になることの方がずっと多いからです。ブラウザごとにquirks-modeが異なるので、ブラウザ間で一貫してページを表示させることは、2桁以上難しくなります。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では動作しません。inが"replaced"要素であることと関係があるようです。しかし 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 は、行が常にその内容をすべて含むようにします。そうしないと、フローティング要素が時々オーバーフローすることがあります。また height: 100% は、2行目の行ができるだけ拡張され、1行目ができるだけ小さくなるようにするためです。

おすすめです。オプション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は奇妙です。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します