Comment créer une colonne pleine hauteur, largeur fixe et centrée en CSS ?

Implémentation d'une mise en page CSS avec une seule colonne centralisée à largeur fixe et une hauteur s'étendant de l'en-tête au pied de page

Lors de la conception d'une mise en page de site Web, il peut être difficile de créer une seule colonne centrale de largeur fixe qui s'étend sur toute la hauteur de la page, à l'exclusion de l'en-tête et du pied de page. Cet article explore deux solutions potentielles à ce problème en utilisant du CSS pur.

Option 1 : Utiliser Flexbox pour les navigateurs modernes

Pour les navigateurs prenant en charge Flexbox, une approche simple consiste à utiliser un conteneur flexbox :

html, body {height: 100%; padding: 0; margin: 0; width: 100%;}
body {display: flex; flex-direction: column;}
#main {flex-grow: 1;}

<header>header</header>
<div>

Option 2 : Positionnement absolu pour une compatibilité plus large avec les navigateurs

Pour une compatibilité plus large avec les navigateurs, une solution alternative consiste à utiliser le positionnement absolu :

body {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
header {position: absolute; top: 0; left: 0; right: 0; height: 50px;}
#main {position: absolute; top: 50px; bottom: 0; left: 50%; transform: translate(-50%, 0); width: calc(100% - 100px);}
footer {position: absolute; bottom: 0; left: 0; right: 0; height: 50px;}

<header>header</header>
<div>

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!