Quelqu'un peut-il m'expliquer comment aligner un div de pied de page en bas de la page ? Les exemples que j'ai vus montrent tous comment faire en sorte que la division reste visible en bas de la page, quel que soit l'endroit où vous avez fait défiler la page. Mais ce n'est pas ce que je veux. Je veux qu'il soit fixé au bas de la page et qu'il ne bouge pas. Merci de votre aide !
Réponses
Trop de publicités?C'est ce que vous voulez dire ?
http://ryanfait.com/sticky-footer/
Cette méthode n'utilise que 15 lignes de CSS et pratiquement aucune balise HTML. Mieux encore, il s'agit d'un CSS entièrement valide, qui fonctionne dans tous les principaux navigateurs. Internet Explorer 5 et plus, Firefox, Safari, Opera et plus encore.
Ce pied de page restera en permanence au bas de la page. Cela signifie que si le contenu dépasse la hauteur de la fenêtre du navigateur, vous devrez faire défiler la page vers le bas pour voir le pied de page... mais si le contenu est inférieur à la hauteur de la fenêtre du navigateur, le pied de page restera au bas de la fenêtre du navigateur au lieu de flotter au milieu de la page.
Voici une autre solution, peut-être meilleure :
http://www.cssstickyfooter.com/
Faites-moi savoir si vous avez besoin d'aide pour la mise en œuvre. J'espère que cela vous aidera.
Ainsi, la division sera fixée au bas de la page, mais si la page est longue, elle ne sera visible que lorsque vous la ferez défiler.
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
La hauteur et la marge supérieure doivent être identiques pour que le pied de page n'apparaisse pas au-dessus du contenu.
Votre titre et vos commentaires impliquent que vous ne recherchiez pas un pied de page collant (collé au bas de la fenêtre lorsque le contenu défile en dessous). Je suppose que vous recherchiez un pied de page qui serait forcé au bas de la fenêtre si le contenu ne remplit pas la fenêtre, et poussé au bas du contenu si celui-ci dépasse la limite de la fenêtre.
Vous pouvez y parvenir de la manière suivante.
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
Source : Comment maintenir les pieds de page en bas de la page ?
- Réponses précédentes
- Plus de réponses