Puis-je faire en sorte qu'une Iframe remplisse la hauteur restante d'un conteneur en utilisant uniquement du CSS ?

Faire en sorte que l'Iframe s'adapte à 100 % de la hauteur restante du conteneur

Problème :

Lors de la création d'une page Web avec à la fois un bannière et une iframe, il est souhaitable que l'iframe remplisse automatiquement la hauteur restante de la page lorsque le navigateur se redimensionne. Est-ce réalisable uniquement avec CSS, sans JavaScript ?

Solution :

En 2019, flexbox est apparue comme la solution optimale pour ce scénario. Flexbox offre une excellente prise en charge sur tous les navigateurs et fournit un moyen efficace de contrôler la disposition des éléments de la page.

À l'aide de flexbox, vous pouvez définir un conteneur parent dont la taille est de 100 % en hauteur et en largeur, avec un flex- direction définie sur la colonne. Cela organise les éléments verticalement.

Dans le conteneur parent, créez deux lignes :

1. Première ligne : Donnez-lui une hauteur fixe ou un contenu qui détermine sa hauteur. .
2. Deuxième rangée : Définissez sa propriété flex-grow sur 1 pour la faire s'étendre pour remplir l'espace restant.

Extrait de code :

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>

Avec cette configuration, l'iframe de la deuxième rangée ajustera automatiquement sa hauteur à occupent l'espace restant dans la page, même lorsque le navigateur est redimensionné.

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!