web-dev-qa-db-fra.com

Comment positionner div en bas de page

Comment définir la position d'un <div> au bas de la page avec CSS ou jQuery?

jqueryhtmlcssposition
11
Shahin

Utilisez position:absolute et bottom:0

Vérifiez exemple de travail. http://jsfiddle.net/gyExR/

11
Hussein

Vous pouvez utiliser position:absolute;bottom:0; si c'est tout ce que vous voulez.

6
fabrik

en css: position: absolue ou position: fixe

2
lmondria

Nous avons déjà répondu à cette question, mais pour donner un peu plus de contexte aux non-experts en CSS:

Étant donné le code HTML

<html>
  <body>
    <p>Some content</p>
    <div class="footer">down there</div>
  </body>
</html>

alors le css suivant

div.footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

positionnera le texte dans le coin inférieur droit de la fenêtre (fenêtre du navigateur). Le défilement déplacera le texte de pied de page.

Si tu utilises

div.footer {
  position: fixed;
  bottom: 0;
  right: 0;
}

par contre, le pied de page restera au bas de la fenêtre, même si vous faites défiler. La même technique peut être utilisée avec top: 0 et left: 0 btw pour positionner un élément dans le coin supérieur gauche.

1
Stefan Haberl

La combinaison position:fixed; avec bottom:0; fonctionne pour moi.

1
Shrinivas Naik

Je pense que tu peux faire ça:

    html{
      min-height:100%;
      position:relative;
      background-color:red;
    }
    .footer{
      bottom:0;
      position:absolute;
      background-color:blue;
    }
<html>
  <body>
    <div class='footer'>
    <h1>I am Footer</h1>
    </div>
    </body>
  </html>
0
Gilberto Giro