web-dev-qa-db-fra.com

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

Quelqu'un peut-il expliquer comment aligner un div de pied de page au bas de la page. D'après les exemples que j'ai vus, ils montrent tous comment rendre la division visible en bas, peu importe où vous avez fait défiler la page. Bien que je ne le veuille pas comme ça. Je veux que cela soit corrigé au bas de la page, pour que ça ne bouge pas. Appréciez l'aide!

htmlcssfooteralignment
75
Joey Morani

UPDATE

Ma réponse initiale date d'il y a longtemps et les liens sont brisés. le mettre à jour pour qu'il continue d'être utile.

J'inclus des solutions mises à jour en ligne, ainsi qu'un exemple de travail sur JSFiddle. Remarque: je compte sur une réinitialisation CSS, bien que je n'inclue pas ces styles en ligne. Reportez-vous à normalize.css

Solution 1 - décalage de marge

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

CSS

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

#wrapper {
  background-color: #e3f2fd;
  min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}

#wrapper:after {
  content: "";
  display: block;
  height: 50px; /* the footer's total height */
}

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer's total height */
}

#footer-content {
  background-color: #f3e5f5;
  border: 1px solid #ab47bc;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  padding: 8px;
}

Solution 2 - Flexbox

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

HTML

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content {
  background-color: #e3f2fd;
  flex: 1;
  padding: 20px;
}

#footer {
  background-color: #f3e5f5;
  padding: 20px;
}

Voici quelques liens avec des explications plus détaillées et différentes approches:

RÉPONSE ORIGINALE

C'est ce que tu veux dire?

http://ryanfait.com/sticky-footer/

Cette méthode utilise seulement 15 lignes de CSS et pratiquement aucun balisage HTML. Mieux encore, il s'agit d'un code CSS totalement valide, qui fonctionne dans tous les principaux navigateurs. Internet Explorer 5 et supérieur, Firefox, Safari, Opera et plus.

Ce pied de page restera au bas de la page de façon permanente. Cela signifie que si le contenu dépasse la hauteur de la fenêtre du navigateur, vous devrez faire défiler l'écran 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 reste en bas. de la fenêtre du navigateur au lieu de flotter au milieu de la page.

Faites-moi savoir si vous avez besoin d'aide pour la mise en œuvre. J'espère que ça aide.

88
Hristo

Cela fera que la div sera fixée au bas de la page mais si la page est longue, elle ne sera visible que lorsque vous faites défiler l'écran.

<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 ne s'affiche pas sur le contenu.

42
ovais.tariq

Votre titre et vos commentaires impliquent que vous ne cherchiez pas un pied de page collant (collé au bas de la fenêtre, le contenu défilant en dessous). Je suppose que vous cherchiez un pied de page qui serait forcé au bas de la fenêtre si le contenu ne remplit pas la fenêtre, et appuyez au bas du contenu si le contenu dépasse la limite de la fenêtre.

Vous pouvez accomplir ceci avec ce qui suit.

<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 garder les pieds de page au bas de la page

20
Jason George

vérifier cela, fonctionne 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>
7
Vinay B R

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 montera pas

6
user3395898

Une solution simple que j'utilise fonctionne depuis IE8 +

Donnez min-height: 100% sur le code HTML pour que, si le contenu est inférieur à 5%, la page conserve la hauteur totale du port de visualisation et le pied de page reste en bas de la page. Lorsque le contenu augmente, le pied de page décale avec le contenu et continue de coller au fond.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
4
Sanjeev

Je suis un débutant et ces méthodes ne fonctionnent pas pour moi. Cependant, j'ai essayé une propriété margin-top en CSS et ajouté simplement la valeur du contenu pixels +5.

Exemple: ma mise en page de contenu avait une hauteur de 1000 pixels, j'ai donc placé une valeur de marge supérieure à 1005 pixels dans le pied de page css, ce qui m'a donné une bordure de 5 pixels et un pied de page qui se trouve dans le bas de mon site.

Probablement une façon amateur de le faire, mais EFFICACE !!!

1
Jamie