Comment puis-je créer une mise en page centrée sur une seule colonne avec en-tête et pied de page dans la conception Web ?

Conception centralisée à largeur fixe sur une seule colonne avec en-tête et pied de page

Dans le domaine de la conception Web, obtenir une mise en page à une seule colonne avec un contenu centré qui s'étend sur tout l'écran tout en accueillant des éléments d'en-tête et de pied de page peut être une entreprise cruciale. Cette question examine plusieurs approches et leur adéquation à cette exigence de conception.

Approche 1 : Trois colonnes avec faux centre

Création de trois colonnes, avec des marges ajustées au centre la colonne centrale et un faux élément central pour l'expansion en hauteur ont été suggérés. Cependant, il introduit des colonnes latérales vides inutiles, ce qui annule son caractère pratique.

Approche 2 : colonne unique avec marges automatiques et décalage supérieur

Positionnement d'une seule colonne avec marges automatiques pour un centrage et un décalage supérieur peuvent obtenir l'effet souhaité. Cependant, étendre la colonne pour occuper la hauteur restante nécessite une exploration plus approfondie.

Solution : Flexbox

Pour les navigateurs contemporains, l'avènement de Flexbox offre une solution simple. Flexbox offre un contrôle complet de la mise en page, permettant de créer facilement des conceptions à colonne unique.

L'utilisation de JavaScript n'est pas conseillée. Au lieu de cela, nous recommandons le code CSS suivant :

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#main {
  flex-grow: 1;
}

/* optional */
header {
  min-height: 50px;
  background: green;
}

#main {
  background: red;
}

footer {
  min-height: 50px;
  background: blue;
}

<header>header</header>
<div>

Cette solution utilise Flexbox pour créer une mise en page à une seule colonne, l'élément #main occupant la hauteur restante (moins l'en-tête et le pied de page). Les styles d'en-tête et de pied de page facultatifs peuvent être personnalisés selon les besoins.

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!