Comment faire en sorte que la partie pied de page ("pied de page") colle au bord inférieur de la fenêtre - c'est probablement le problème le plus courant dans la mise en page des pages du site. Il y a bien sûr des solutions, et il y en a plusieurs. Vous trouverez ci-dessous une façon de s'assurer que le pied de page est toujours enfoncé au bas de la page, quels que soient la quantité de contenu et le type de navigateur.
Il est nécessaire
Connaissances de base en CSS et HTML
Instructions
Étape 1
Prenons comme exemple l'un des schémas de pagination les plus typiques: il aura un grenier (en-tête), un bloc principal et un pied de page. Bien sûr, si nécessaire, vous pouvez mettre plusieurs colonnes dans le bloc principal, mais nous ne le ferons pas ici, nous nous attacherons uniquement à ne pas positionner le pied de page. Le code HTML de la page commencera par la déclaration de la spécification:
Entre les balises et, en plus du titre de la page, nous placerons une indication de l'encodage: Ainsi qu'un lien vers un fichier CSS externe contenant une description des styles: @import "styles.css"; Nous ne placerons pas le description des styles directement dans le code html de la page pour éviter les complications avec le navigateur Opera de la neuvième version. Entrez les balises et placez le bloc structure de la page. Le premier, bien sûr, est le bloc de titre. Nous lui donnerons l'identifiant d'en-tête pour pouvoir définir des styles pour ce bloc particulier:
Cet en-tête est toujours en haut de la fenêtre.
Puis - le bloc principal de la page. Il se composera de deux imbriqués - externe (identifiant - externe) et interne (identifiant - enveloppe externe):
C'est la partie principale.
Et enfin, le pied de page:
C'est le pied de page - toujours en bas de la fenêtre !
La page complète ressemblera à ceci:
Comment appuyer sur le pied de page
@import "styles.css";
Cet en-tête est toujours en haut de la fenêtre.
C'est la partie principale.
C'est le pied de page - toujours en bas de la fenêtre !
Étape 2
Passons maintenant au contenu de la feuille de style. Il implémente le schéma suivant: le bloc de page principal sera mis à 100 % de hauteur, le titre sera positionné de manière absolue et le pied de page sera relativement. Pour éviter que le titre ne chevauche le contenu principal de la page, ce contenu principal est placé dans une zone supplémentaire à l'intérieur de la zone principale, et cette zone supplémentaire est définie sur une marge supérieure égale à la hauteur de la zone de titre. Et le pied de page se voit attribuer une marge supérieure négative égale à sa hauteur - de cette manière, il sera surélevé au-dessus du bord inférieur de la fenêtre à sa hauteur totale. Contenu complet du fichier css: * {marge: 0; remplissage: 0}
html, corps {hauteur: 100 %;} corps {
la couleur noire;
position: relative;
}
#extérieur {
hauteur minimale: 100 %;
marge: 0;
fond: blanc;
la couleur noire;
} * html #extérieur {hauteur: 100 %;}
#entête {
position: absolue;
haut: 0;
à gauche: 0;
largeur: 100 %;
hauteur: 70px;
fond: # 304a00;
débordement caché;
Couleur blanche;
text-align: centre;
} #bas de page {
position: relative;
marge supérieure: -50px;
clarifier les deux;
largeur: 100 %;
hauteur: 50px;
couleur d'arrière-plan: # 304a00;
Couleur blanche;
text-align: centre;
}
.outerwrap {
flotteur: gauche;
largeur: 100 %;
rembourrage haut: 71px;
} Ce fichier doit être enregistré avec le nom que nous avons spécifié dans le code html de la page - styles.css.
