Comment créer un en-tête et un pied de page fixes avec du contenu défilant en HTML et CSS ?

Création d'un en-tête et d'un pied de page fixes avec un contenu défilant

Afin d'obtenir un en-tête, un pied de page et un contenu défilant fixes, comme vu sur de nombreuses pages Web, cinq étapes doivent être suivies :

1. Créer un HTML de base Structure : commencez par la structure HTML de base, y compris , et balises, ainsi qu'un fichier CSS externe pour un style supplémentaire.
2. Définir les propriétés de la page : définissez les propriétés de hauteur et de largeur du corps sur 100 % pour garantir que la page occupe toute la fenêtre d'affichage.
3. Établir les propriétés de l'en-tête : créez un élément div d'en-tête et définissez sa position sur absolue. Cet élément sera placé en haut de la page avec une hauteur fixe et s'étendra tout autour de l'écran. De plus, ajoutez un débordement : caché ; propriété pour contenir n'importe quel contenu à l'intérieur de l'en-tête.
4. Établir les propriétés du contenu : De même, créez un div pour le contenu et positionnez-le de manière absolue. Le contenu aura une hauteur fixe, la hauteur restante étant allouée à l'en-tête et au pied de page. Définissez la propriété de débordement sur auto pour permettre le défilement vertical.
5. Établir les propriétés du pied de page : Le pied de page, comme l'en-tête, sera un div positionné de manière absolue avec une hauteur et une largeur fixes. Il sera placé en bas de page. Encore une fois, incluez overflow: Hidden; pour éviter le débordement de contenu.

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!