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

606 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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