CSS pour pied de page fixe
J'ai une assez basique page HTML. Le code se présente comme suit:
<body>
<header style="min-height: 255px;">
</header>
<article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
Body text goes here.
</article>
<footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
Copyright information
</footer>
</body>
Habituellement, mon corps de texte est assez grand. Le texte est assez grand qu'une barre de défilement est nécessaire. On dirait le pied de page se trouve sur le dessus du texte vers le bas. Alors, quand je scroll vers le bas, le pied de page ne reste pas fixe. Ce que je fais mal?
Merci
source d'informationauteur user687554 | 2012-12-09
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin
position:fixed;
dans votre pied de page:Changement
position: absolute
du pied de page àposition: fixed
.http://jsfiddle.net/SUQuX/
Pourquoi? C'est ce qui explique comment ils diffèrent https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ je pense que dans votre cas, le problème est que le
absolute
élément est attachant au corps, donc il va défiler avec le corps.Utilisation
position: fixed
au lieu deposition: absolute
.Pourquoi? C'est ce qui explique comment ils diffèrent https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ je pense que dans ton cas, le problème est que dans l'absolu, l'élément est attachant au corps, donc il va défiler avec le corps.
Je suis en train d'écrire cette réponse parce que je pense qu'il peut aider quelqu'un dans le futur. Je suis confronté à un problème, même après la définition de la
height
du pied de page etmargin-bottom
pour le corps.Le problème est que si vous avez site web réactif où la hauteur de pied de page dynamique des changements basés sur la taille de l'écran, vous aurez le contenu qui se chevauchent. Pour le résoudre, j'ai utilisé jQuery - Conserver tous les paramètres identiques à l'exception d'
margin-bottom
pourbody
etheight
de pied de page.Cela vous permettra de toujours garder le pied au fond, même lorsque le pied de la hauteur des changements et il wil être pas de contenu au cours de rodage.