Comment remplir l'espace entre l'en-tête et le pied de page avec des Divs à l'aide de Flexbox ?-tutoriel CSS-php.cn

Comment remplir l'espace entre l'en-tête et le pied de page avec des Divs à l'aide de Flexbox ?

Linda Hamilton

Libérer： 2024-11-19 06:10:03

original

709 Les gens l'ont consulté

How to Fill the Space Between Header and Footer with Divs Using Flexbox?

Remplir l'espace entre l'en-tête et le pied de page avec des divs

Lors de la transition des tableaux aux divs pour la mise en page, un défi courant consiste à s'adapter aux hauteurs de contenu dynamiques tout en conservant la disposition souhaitée. Voici comment créer un div qui remplit tout l'espace entre un en-tête et un pied de page fixes.

Solution Flexbox

La mise en page Flex fournit une solution élégante pour ce scénario, permettant aux éléments du conteneur (en-tête et pied de page ) pour respecter leurs hauteurs fixes tout en permettant à la zone de contenu de s'ajuster automatiquement. Cette configuration ressemble au comportement par défaut des applications mobiles.

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

Copier après la connexion

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Copier après la connexion

Dans cette configuration, le div body devient un conteneur flexible, et son les éléments enfants (en-tête, principal et pied de page) deviennent des éléments flexibles. La propriété flex-direction spécifie la direction des éléments flexibles, dans ce cas, verticalement (colonne).

Les éléments d'en-tête et de pied de page sont définis sur flex : none, ce qui signifie qu'ils ne rétréciront pas ou ne s'agrandiront pas par rapport à leurs dimensions initiales, garantissant qu'ils conservent leurs hauteurs fixes. L'élément principal, en revanche, est défini sur flex: auto, indiquant qu'il doit remplir l'espace restant.

De plus, overflow-y: scroll est appliqué à l'élément principal pour introduire un défilement vertical lorsque le le contenu dépasse l’espace disponible. La propriété -webkit-overflow-scrolling: touch améliore le comportement de défilement sur les appareils iOS.

Cette configuration crée efficacement une mise en page flexible et dynamique où l'en-tête et le pied de page restent fixes à leurs positions respectives supérieure et inférieure, tandis que le contenu div remplit de manière transparente l'espace entre eux, s'adaptant à différentes hauteurs d'écran.

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!