Comment obtenir un espacement réactif entre les divisions d'en-tête, de contenu et de pied de page à l'aide de Flexbox ?-tutoriel CSS-php.cn

Comment obtenir un espacement réactif entre les divisions d'en-tête, de contenu et de pied de page à l'aide de Flexbox ?

Patricia Arquette

Libérer： 2024-11-15 13:14:02

original

755 Les gens l'ont consulté

How to Achieve Responsive Spacing between Header, Content, and Footer Divs using Flexbox?

Résoudre le placement des divs qui remplissent l'espace entre l'en-tête et le pied de page

Lors de la transition des mises en page basées sur des tableaux vers des mises en page basées sur des div, un obstacle commun se pose : assurer un espacement cohérent et réactif entre divs d’en-tête, de contenu et de pied de page. Voici une approche fiable utilisant Flexbox :

Solution Flexbox

La disposition Flex vous permet de distribuer dynamiquement l'espace, permettant des hauteurs naturelles d'en-tête et de pied de page tandis que le contenu remplit de manière transparente la zone restante. Cela imite le comportement intuitif des applications mobiles natives, où les en-têtes et les pieds de page adhèrent aux bords supérieur et inférieur de la fenêtre, laissant le contenu défiler dans la section principale.

Implémentation HTML et CSS

Le code suivant démontre la solution :

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

Copier après la connexion

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

En tirant parti de la flexibilité de Flexbox, vous pouvez allouer de l'espace avec élégance et réactivité au sein de votre page Web, garantissant une expérience utilisateur optimale quelle que soit la résolution de l'é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!