Comment puis-je faire en sorte qu'un Iframe remplisse la hauteur restante d'une page en utilisant uniquement CSS ?

Faire en sorte que l'Iframe remplisse la hauteur restante de manière transparente sans JavaScript

Lors de la conception d'une page Web avec une bannière et une iframe, on peut désirer l'iframe pour redimensionner automatiquement pour occuper toute la hauteur restante de la page. Y parvenir avec CSS est réalisable.

À l'origine, définir la hauteur de l'iframe à 100 % semblait logique mais aboutissait à une iframe tentant de remplir la page entière, y compris la hauteur de la bannière. Cela a conduit à une barre de défilement verticale inutile. De plus, l'utilisation de la marge CSS et du remplissage sur le DIV pour réserver la hauteur restante fonctionnait pour le DIV mais pas pour les iframes.

Depuis 2019, la solution optimale est flexbox. Il bénéficie d'un large support sur tous les navigateurs :

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!