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

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

Mary-Kate Olsen
Libérer: 2024-12-08 05:42:15
original
974 Les gens l'ont consulté

How Can I Make an Iframe Dynamically Fill Remaining Page Height with CSS Only?

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; }
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal