Mise à jour en 2019
TL;DR : Aujourd'hui, la meilleure option est - flexbox . Tout le monde le supporte bien et cela depuis des années. Allez-y et ne regardez pas en arrière. Voici un exemple de code pour 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>
Le reste de cette réponse est laissé pour des raisons pédagogiques et historiques.
L'astuce consiste à comprendre de quoi sont faits les 100%. La lecture des spécifications CSS peut vous y aider.
Pour faire court, il existe un "bloc contenant", qui n'est pas nécessairement l'élément parent. En d'autres termes, c'est le premier élément de la hiérarchie qui a une position:relative ou une position:absolue. Ou l'élément body lui-même s'il n'y a rien d'autre. Ainsi, lorsque vous dites "width : 100%", le système vérifie la largeur du "bloc contenant" et définit la largeur de votre élément à la même taille. S'il y avait autre chose, le contenu du "bloc contenant" pourrait être plus grand que lui-même (donc "déborder").
La hauteur fonctionne de la même manière. A une exception près. Vous ne pouvez pas obtenir une hauteur correspondant à 100 % de la fenêtre du navigateur. L'élément de très haut niveau, par rapport auquel on peut calculer la hauteur de 100%, est l'élément body (ou html ? je ne suis pas sûr), et il s'étire juste assez pour contenir son contenu. Spécifier height:100% sur cet élément 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'étende exactement sur 100 % de la fenêtre, vous avez deux possibilités :
- Utilisez JavaScript
- N'utilisez pas DOCTYPE. Ce n'est pas une bonne pratique, mais cela met les navigateurs en "mode bizarrerie", dans lequel vous pouvez faire height="100%" sur les éléments et il les étire à la taille de la fenêtre. Notez que le reste de votre page devra probablement être modifié pour s'adapter aux changements DOCTYPE.
~~
Mise à jour : Je ne suis pas sûr de ne pas m'être déjà trompé lorsque j'ai posté ceci, mais c'est certainement dépassé maintenant. Aujourd'hui, vous pouvez faire cela dans votre feuille de style : html, body { height: 100% } et il s'étendra réellement à l'ensemble de votre fenêtre d'affichage. Même avec un DOCTYPE. min-height: 100% pourrait également être utile, en fonction de votre situation.
Et je Je ne conseillerais à personne de créer un document en mode bizarrerie. plus non plus, parce que ça cause beaucoup plus de maux de tête que ça n'en résout. Chaque navigateur a un mode de fonctionnement différent, de sorte qu'il est deux fois plus difficile de faire en sorte que votre page soit cohérente d'un navigateur à l'autre. 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 qui ont 10 ans.
La seule exception est lorsque vous devez prendre en charge quelque chose comme IE5 ou autre. Si vous en êtes là, alors vous êtes tout seul de toute façon. Ces anciens navigateurs n'ont rien à voir avec les navigateurs d'aujourd'hui, et peu de conseils qui sont donnés ici vous aideront avec eux. Le bon côté des choses, c'est que si vous en êtes là, vous n'avez probablement qu'à supporter UN seul 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. Sympathique et propre pour les cas où 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-row est nécessaire car bottom: 0 y right: 0 ne fonctionne pas sur les iframes pour une raison quelconque. Quelque chose à voir avec le fait que in est un élément "remplacé". Mais width: 100% y height: 100% fonctionne très bien. display: block est nécessaire parce que c'est un inline par défaut et les espaces blancs commencent à créer des débordements bizarres sinon.
Option 2 - tables. Fonctionne lorsque vous ne connaissez pas la hauteur de la première partie. Vous pouvez utiliser soit la hauteur réelle <table> ou le faire de manière plus sophistiquée avec display: table . Je vais opter pour la seconde solution, car elle semble être à la mode en ce moment.
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: auto permet de s'assurer que la ligne inclut toujours l'ensemble de son contenu. Sinon, les éléments flottants peuvent parfois déborder. Le site height: 100% sur la deuxième rangée fait en sorte qu'elle s'étende autant qu'elle le peut en comprimant la première rangée au maximum.
Recommandé : Option 3 - flexbox - La plus propre de toutes.
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 - le overflow: hidden c'est parce que l'iframe génère toujours une sorte de débordement même avec display: block dans ce cas. Il n'est pas visible dans la vue plein écran ou dans la vue de l'ordinateur. [ ]
