La plupart des sites Web contiennent des pieds de page avec des informations telles que les dates de copyright, "À propos de nous" l'information et les possibilités de carrière. Bien qu'il semble comme si elle devrait être assez simple pour placer des objets sur le bas de la page, souvent, l'information se déplace en fonction de la taille du navigateur et la quantité de texte. Utilisation des feuilles de style en cascade (CSS) et divs, vous pouvez créer un simple pied de page qui va rester au bas de la page quelle que soit la taille de la fenêtre et la quantité de contenu.
Définissez les propriétés de la hauteur du corps et de la classe de conteneur. Dans la feuille de style CSS régler la "html" et "corps" les classes à hauteur de 100 pour cent. Ajouter un "récipient" classe et régler la hauteur min à 100 pour cent, la hauteur de l'auto! important, hauteur à 100 pour cent et la marge à 0 négative automatique (hauteur de pied de page).
Par exemple "html, body {height: 100% -}" et ".container {min-height: 100% - hauteur: auto hauteur important-: 100% - Marge 0 auto -35px."
Ajouter deux classes pour le pied. Une classe contiendra le pied de page réelle tandis que l'autre classe étend les marges au-delà de la page pour faire de la place pour le pied. Réglez la fois de ces classes à la même hauteur. Par exemple, ".footer {height: 35px -}" et ".extender {height: 35px;}"
Reportez-vous à l'exemple suivant de feuille de style CSS. Copiez et collez le code suivant dans votre feuille de style. Modifiez les noms et la hauteur du pied de page comme vous le souhaitez.
{Margin: 0-}
html, body {height: 100% -}
.wrapper {min-height: 100% - height: auto hauteur important-: 100% -margin: 0 auto -35px;!}
.footer {height: 35px;}
.extender {height: 35px;}
Ajouter ces classes dans la page web. Entrez un div pour la balise conteneur entre l'ouverture et les balises de fermeture pour le corps. Entrez le contenu de la page Web après la balise d'ouverture du récipient. Ajouter un div pour la classe d'extension, après fermeture du tag le contenu. Ensuite, fermez la balise conteneur après la fermeture de la balise de la rallonge. Ajouter un div pour le pied après la clôture l'étiquette du récipient. Entrez le contenu du pied de page. Ensuite, fermez la balise footer.
Reportez-vous au code HTML suivant. Copiez et collez le code suivant dans votre site web. Changer les noms pour refléter vos classes réelles et ajouter du contenu comme vous le souhaitez.
Contenu Pied
"