88 votes

Comment aligner le pied de page (div) en bas de la page ?

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 !

103voto

Hristo Points 12268

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.

47voto

ovais.tariq Points 1965

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.

22voto

Jason George Points 5507

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 ?

10voto

Utilisez <div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div> . Le pied de page ne monte pas

8voto

Vinay B R Points 5026

Regardez ça, ça marche sur firefox et IE.

<style>
    html, body
    {
        height: 100%;
    }
    .content
    {
        min-height: 100%;
    }
    .footer
    {
        position: relative;
        clear: both;
    }
</style>

<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X