Comment puis-je faire en sorte qu'un Iframe remplisse dynamiquement la hauteur de la page restante avec CSS uniquement ?

Gestion dynamique de la hauteur des pages pour les Iframes avec CSS

Question :

Réaliser une iframe qui Remplir de manière transparente la hauteur restante d'une page Web et s'adapter automatiquement au redimensionnement du navigateur s'est avéré un défi. Malgré les tentatives d'utilisation de height:100% et des techniques de marge/padding, une barre de défilement verticale inutile persiste car l'iframe tente d'occuper toute la hauteur de la page, y compris l'en-tête. Comment ce problème peut-il être résolu uniquement avec CSS ?

Réponse :

Mise à jour en 2019 :

Flexbox s'est imposé comme la solution la plus fiable et la plus largement prise en charge pour cela dilemme.

Code CSS :

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; }

Structure HTML :

<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>

En implémentant flexbox, l'iframe s'agrandira automatiquement pour remplir l'espace restant sous l'en-tête. Il ajustera sa hauteur de manière dynamique à mesure que la fenêtre du navigateur est redimensionnée, garantissant une mise en page réactive et visuellement agréable.

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!