Mise à jour en 2019
TL; DR: Aujourd'hui, la meilleure option est la dernière de cette réponse - flexbox. Tout le supporte bien et depuis des années. Allez-y et ne regardez pas en arrière. Le reste de cette réponse est laissé pour des raisons historiques.
L'astuce consiste à comprendre de quoi est pris le 100%. La lecture des spécifications CSS peut vous y aider.
Pour faire une histoire courte - il existe une chose telle que "contenant un bloc" - qui n'est pas nécessairement l'élément parent. En termes simples, c'est le premier élément de la hiérarchie qui a position: relative ou position: absolue. Ou l'élément corps lui-même s'il n'y a rien d'autre. Ainsi, lorsque vous dites "largeur: 100%", il vérifie la largeur du "bloc contenant" et définit la largeur de votre élément à la même taille. S'il y avait quelque chose d'autre, alors vous pourriez obtenir le contenu d'un "bloc contenant" qui est plus grand que lui-même (donc "débordant").
La hauteur fonctionne de la même manière. À une exception près. Vous ne pouvez pas obtenir la hauteur à 100% de la fenêtre du navigateur. L'élément de niveau supérieur, par rapport auquel 100% peut être calculé, est l'élément body (ou html? Pas sûr), et qui s'étire juste assez pour contenir son contenu. Spécifier la hauteur: 100% dessus n'aura aucun effet, car il n'a pas "d'élément parent" par rapport auquel mesurer 100%. La fenêtre elle-même ne compte pas. ;)
Pour que quelque chose s'étire exactement à 100% de la fenêtre, vous avez deux choix:
- Utiliser JavaScript
- N'utilisez pas DOCTYPE. Ce n'est pas une bonne pratique, mais cela met les navigateurs en "mode excentrique", dans lequel vous pouvez faire height = "100%" sur les éléments et les étirer à la taille de la fenêtre. Notez que le reste de votre page devra probablement être modifié également pour s'adapter aux modifications de DOCTYPE.
Mise à jour: je ne sais pas si je ne m'étais pas déjà trompé lorsque j'ai posté cela, mais cela est certainement obsolète maintenant. Aujourd'hui, vous pouvez le faire dans votre feuille de style: html, body { height: 100% }elle s'étendra à l'ensemble de votre fenêtre. Même avec un DOCTYPE. min-height: 100%pourrait également être utile, selon votre situation.
Et je ne conseillerais à personne de créer un document en mode excentrique non plus, car cela provoque beaucoup plus de maux de tête que de les résoudre. Chaque navigateur a un mode bizarrerie différent, donc rendre votre page cohérente sur tous les navigateurs devient plus difficile de deux ordres de grandeur. Utilisez un DOCTYPE. Toujours. De préférence le HTML5 - <!DOCTYPE html>. Il est facile à retenir et fonctionne comme un charme dans tous les navigateurs, même ceux de 10 ans.
La seule exception est lorsque vous devez prendre en charge quelque chose comme IE5 ou quelque chose. Si vous y êtes, vous êtes quand même tout seul. Ces anciens navigateurs ne ressemblent en rien aux navigateurs d'aujourd'hui, et les petits conseils donnés ici vous aideront à les utiliser. Du côté positif, si vous y êtes, vous n'avez probablement qu'à prendre en charge UN type de navigateur, ce qui élimine les problèmes de compatibilité.
Bonne chance!
Mise à jour 2: Hé, ça fait longtemps! 6 ans plus tard, de nouvelles options font leur apparition. Je viens d'avoir une discussion dans les commentaires ci-dessous, voici d'autres astuces pour vous qui fonctionnent dans les navigateurs d'aujourd'hui.
Option 1 - positionnement absolu. Agréable et propre pour quand vous connaissez la hauteur précise de la première partie.
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>
Quelques notes - le second-rowconteneur est nécessaire car bottom: 0et right: 0ne fonctionne pas sur les iframes pour une raison quelconque. Quelque chose à voir avec le fait d'être un élément "remplacé". Mais width: 100%et height: 100%fonctionne très bien. display: blockest nécessaire car c'est un inlineélément par défaut et les espaces commencent à créer des débordements étranges sinon.
Option 2 - tableaux. Fonctionne lorsque vous ne connaissez pas la hauteur de la première pièce. Vous pouvez utiliser des <table>balises réelles ou le faire de la manière la plus élégante avec display: table. Je vais opter pour ce dernier car il semble être à la mode ces jours-ci.
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>
Quelques notes - le overflow: autos'assure que la ligne inclut toujours tout son contenu. Sinon, les éléments flottants peuvent parfois déborder. Le height: 100%sur la deuxième rangée s'assure qu'il se dilate autant qu'il peut en serrant la première rangée aussi petite que possible.
Option 3 - flexbox. Le plus propre de tous, mais avec un support de navigateur moins que stellaire. IE10 aura besoin de -ms-préfixes pour les propriétés de la flexbox, et rien de moins ne le supportera pas du tout.
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>
Quelques notes - overflow: hiddenc'est parce que l'iframe génère toujours une sorte de débordement même avec display: blockdans ce cas. Il n'est pas visible dans la vue plein écran ou dans l'éditeur d'extraits de code, mais la petite fenêtre d'aperçu dispose d'une barre de défilement supplémentaire. Aucune idée de ce que c'est, les iframes sont bizarres.