Comment créer un div qui remplit l'espace entre l'en-tête et le pied de page à l'aide de Flexbox ?-tutoriel CSS-php.cn

Comment créer un div qui remplit l'espace entre l'en-tête et le pied de page à l'aide de Flexbox ?

Patricia Arquette

Libérer： 2024-11-10 03:23:02

original

231 Les gens l'ont consulté

How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

Créer un div pour remplir l'espace entre les divs d'en-tête et de pied de page

Lors de la transition d'une disposition basée sur un tableau à l'utilisation de divs, maintenir un espacement approprié entre l'en-tête, le contenu et le pied de page éléments peuvent être un défi. Voici une solution efficace utilisant Flexbox :

Solution Flexbox

Flexbox permet une mise en page flexible et réactive, garantissant que l'en-tête et le pied de page restent fixes tandis que la zone de contenu remplit l'espace restant.

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

Avec ce code, l'élément body est affiché sous forme de colonne flexbox et l'en-tête et le pied de page sont définis comme flex: none, indiquant qu'ils ne doivent pas s'étendre ou se réduire. L'élément principal, qui contient le contenu, est défini comme flex: auto, ce qui lui permet d'occuper tout l'espace restant. Les propriétés overflow-y et -webkit-overflow-scrolling garantissent que le contenu peut défiler verticalement dans l'élément principal.

Cette approche permet une mise en page dynamique qui s'adapte à différentes résolutions d'écran, garantissant que l'en-tête et le pied de page reste fixe pendant que le contenu remplit l'espace disponible.

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!