recherche

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

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
Patricia Arquetteoriginal
2024-11-15 13:14:02669parcourir

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>  
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;
}

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!

css html for while using this viewport transition table
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Transitions CSS3 vs animations jQuery : qui gagne la course de vitesse ?Article suivant：Transitions CSS3 vs animations jQuery : qui gagne la course de vitesse ?

Articles Liés

Voir plus