Comment faire en sorte qu'une Iframe remplisse la hauteur restante de son conteneur sans JavaScript ?

Créer un Iframe pour qu'il s'adapte à 100 % de la hauteur restante du conteneur sans JavaScript

Lors de la conception d'une page Web avec à la fois une bannière et un iframe, obtenir une mise en page où l'iframe est automatiquement s'ajuste pour remplir la hauteur restante peut poser un défi.

Initial Tentative

Régler la hauteur de l'iframe sur "100 %" semble être une solution simple. Cependant, cette approche tente de remplir toute la hauteur de la page, y compris la zone de la bannière. En conséquence, une barre de défilement verticale inutile apparaît.

Utilisation de la marge et du remplissage CSS

Bien que la marge et le remplissage CSS puissent remplir efficacement la hauteur restante des éléments DIV, cette stratégie ne fonctionne pas comme prévu pour iframes.

Solution

Pour résoudre ce problème, pensez à utiliser flexbox, un module de mise en page CSS qui offre une solution fiable pour ce scénario. Voici un exemple de code utilisant flexbox :

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>

Cette disposition flexbox garantit que la bannière (.first-row) a une hauteur fixe, tandis que l'iframe (.second-row) se développe pour remplir le hauteur restante. La propriété "flex-grow" demande à l'iframe de s'agrandir pour occuper n'importe quel espace disponible.

Cette technique fait en sorte que l'iframe représente 100 % de la hauteur restante du conteneur, s'adaptant de manière transparente au redimensionnement du navigateur.

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!