2019年に更新
TL; DR：今日の最良の選択肢は、この回答の最後の1つ、フレックスボックスです。すべてがそれをうまくサポートし、何年も持っています。そのために行き、振り返ってはいけません。この答えの残りは歴史的な理由のために残されています。
秘訣は、100％が何に使用されているかを理解することです。CSSの仕様を読むことは、そこで役立ちます。
長い話を短くするために-「包含ブロック」のようなものがあります-これは親要素である必要はありません。簡単に言うと、position：relativeまたはposition：absoluteを持つのは、階層の最初の要素です。または、他に何もない場合はbody要素自体。したがって、「幅：100％」と言うと、「包含ブロック」の幅がチェックされ、要素の幅が同じサイズに設定されます。そこに何か他のものがあった場合は、それ自体よりも大きい（つまり「オーバーフロー」）「包含ブロック」のコンテンツを取得する可能性があります。
高さも同じように機能します。1つの例外を除いて。ブラウザウィンドウの100％までの高さは取得できません。100％を計算できる最上位の要素はbody（またはhtml？不明）要素であり、その内容を含めるのに十分なだけ伸びます。100％を測定する「親要素」がないため、高さ：100％を指定しても効果はありません。ウィンドウ自体はカウントされません。;）
何かをウィンドウの100％正確に拡大するには、2つの選択肢があります。
- JavaScriptを使用する
- DOCTYPEは使用しないでください。これは良い方法ではありませんが、ブラウザを「クイズモード」に設定します。このモードでは、要素に対してheight = "100％"を実行でき、要素をウィンドウサイズに拡大します。DOCTYPEの変更に対応するには、ページの残りの部分も変更する必要があることに注意してください。
更新：これを投稿したとき、私が間違っていなかったかどうかはわかりませんが、これは確かに時代遅れです。今日、これをスタイルシートで実行できhtml, body { height: 100% }ます。実際には、ビューポート全体に拡大されます。DOCTYPEでも。min-height: 100%状況によっては、これも役立つ場合があります。
そして、私は奇妙なモードのドキュメントを作るように誰にも助言しませんません。なぜなら、解決するよりもずっと頭痛の種になるからです。ブラウザーごとに異なる癖モードがあるため、ブラウザー間でページを一貫して表示することは2桁難しくなります。DOCTYPEを使用します。常に。HTML5 oneが望ましい<!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、いくつかの理由で、アイフレーム上では動作しません。「置き換えられた」要素であることとは何か。しかし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行目は、それを取得としてそれは小さなとして最初の行を絞ることができます限り必ずそれが拡大します。
オプション3-フレックスボックス。それらの中で最もクリーンなものですが、優れたブラウザのサポートはありません。IE10は-ms-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はdisplay: block、この場合でもiframeが何らかのオーバーフローを生成するためです。全画面表示やスニペットエディタでは表示されませんが、小さなプレビューウィンドウには追加のスクロールバーが表示されます。それが何であるかわからない、iframeは奇妙です。