TRUC IFRAME: Le dimensionner à 100% de hauteur

La plupart du temps, on obtient des résultats inattendus et pas du tout ce que l'on cherche à avoir... Crise de nerfs assurée!

Pour dimensionner efficacement un iframe à 100% de hauteur, il faut le mettre dans un "Parent", un <DIV> en l'occurence, lui-même dimensionné en hauteur (height). Ici, 400px. On remarquera que les dimensions de l'iframe ne sont pas données comme d'habitude mais dans <iframe style=....>.
Si votre <DIV> est lui-même dans un "container" parent dimensionné explicitement, il faut dimensionner le <DIV> à height: 100%;

Le dimensionnement à 100% en largeur (width) ne posant pas de problème particulier, je n'en parlerai pas ici.

<div style="text-align: center; height: 400px;">
<iframe style="overflow:hidden; width:100%; height:100%;" name="MAIN" scrolling="auto" src="http://104.207.144.52/blognotes-tuxnotes-chat.html" frameborder="1">
</iframe></div> 

Exemple, le ZohoChat de BlogNotes/TuxNotes

Mieux! Si vous désirez créer un iframe qui occupe toute l'espace disponible dans votre navigateur (exemple avec la page d'accueil de Zoho Sites):

<div style="text-align: center; height: 100%;">
<iframe style="overflow:hidden; width:100%; height:100%;" name="MAIN" scrolling="auto" src="https://www.zoho.com/sites/" frameborder="1">
</iframe></div>

Voir l'exemple: http://104.207.144.52/test-iframe-100pourcent.html

À quoi ça sert? On a ainsi la possibilité de "réécrire" une page web sur laquelle nous ne pouvons pas agir par exemple pour cacher une bannière publicitaire gênante en utilisant margin-top: -100 px;
Mais vous pouvez avoir d'autres raisons pour le faire. Dans cet exemple, j'ai laissé la bordure de l'iframe pour qu'on le distingue bien.