Comment puis-je utiliser Flexbox pour créer un DIV qui remplit l'espace entre un en-tête et un pied de page ?-tutoriel CSS-php.cn

Comment puis-je utiliser Flexbox pour créer un DIV qui remplit l'espace entre un en-tête et un pied de page ?

Linda Hamilton

Libérer： 2024-11-08 12:45:02

original

704 Les gens l'ont consulté

How can I use Flexbox to create a DIV that fills the space between a header and footer?

Création d'un DIV pour remplir l'espace entre l'en-tête et le pied de page DIV

Lors de la conception d'une mise en page de site Web, il est souvent souhaitable d'avoir un en-tête, pied de page et zone de contenu fluide. À cette fin, les DIV offrent une plus grande flexibilité par rapport aux tableaux traditionnels.

Pour garantir que le pied de page reste en bas de la page et que le contenu du DIV s'ajuste dynamiquement pour remplir l'espace entre l'en-tête et le pied de page, une solution simple réside en utilisant Flexbox.

Implémentation de Flexbox

Flexbox fournit un moyen d'organiser des éléments sur une page, leur permettant de circuler à la fois dans une ligne et dans une colonne. Dans notre cas, nous voulons que la mise en page se déroule dans une colonne, avec l'en-tête et le pied de page collés à leurs positions respectives en haut et en bas.

La structure HTML reste simple, avec un en-tête, un contenu principal et un pied de page :

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

Copier après la connexion

Le CSS peut ensuite être appliqué comme suit :

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

Explication

flex-direction : la colonne définit la flexbox pour organiser ses enfants verticalement.
flex : aucun sur l'en-tête et le pied de page les empêche d'occuper tout espace excessif.
overflow-y : scroll permet le défilement vertical dans le zone de contenu principale, garantissant que le contenu de la page tient dans l'espace restant.
-webkit-overflow-scrolling : touch optimise le comportement de défilement pour les appareils tactiles.
flex : auto permet à la zone de contenu principale de remplissez dynamiquement l'espace restant entre l'en-tête et le pied de page, quelle que soit la résolution de l'écran.

Supplémentaire Considérations

Si le contenu dépasse l'espace disponible, une barre de défilement verticale apparaîtra dans la zone de contenu principale.

En utilisant Flexbox, vous pouvez facilement créer une mise en page où le contenu s'adapte dynamiquement pour remplir l'espace entre un en-tête et un pied de page fixes, ce qui donne un design réactif et visuellement attrayant.

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!