Comment créer une mise en page CSS pleine hauteur sur une seule colonne avec en-tête et pied de page ?

Création d'une mise en page à colonne unique basée sur CSS avec en-tête et pied de page

Dans le domaine de la conception de mise en page CSS, le défi de créer un Une disposition à largeur fixe, à colonne unique, s'étendant sur toute la hauteur de la page, à l'exclusion de l'en-tête et du pied de page, peut être rencontrée. Pour répondre à cette exigence, diverses approches ont été proposées, chacune avec ses avantages et ses inconvénients.

Heureusement, dans les navigateurs modernes (à partir de 2015), une solution simple et fiable est accessible à l'aide de la propriété display:flex. . Cette approche élimine le besoin de JavaScript et fournit une alternative propre et efficace.

La solution utilisant display:flex

Pour implémenter la mise en page avec display:flex, suivez ces étapes :

1. Définissez les éléments html et body pour qu'ils aient une hauteur de 100 %, sans remplissage et sans margin.
2. Appliquez les propriétés display:flex et flex-direction:column à l'élément body. Cela organisera les éléments enfants verticalement.
3. Créez un élément #main et définissez sa propriété flex-grow sur 1. Cela entraînera l'expansion de l'élément pour remplir l'espace vertical restant.
4. Utilisez les propriétés CSS min-height et background pour styliser l'en-tête et le pied de page comme vous le souhaitez.

Exemple Code

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>

En utilisant cette technique, il est possible de créer une mise en page à une seule colonne qui répond aux critères spécifiés, garantissant la compatibilité avec les navigateurs modernes.

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!