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

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

DDD
Libérer: 2024-12-05 19:58:12
original
674 Les gens l'ont consulté

How Can I Make an Iframe Fill the Remaining Height of a Page Using Only 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; }
Copier après la connexion
<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

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal