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

cette question a déjà une réponse ici:

  • Comment obtenir le pied de page pour rester au bas d'une page web? 23 réponses

est-ce que n'importe qui peut 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 le div reste visible en bas, peu importe où vous avez passé la page. Bien que je ne veux pas ça comme ça. Je veux qu'il soit réparé en bas de la page, pour qu'il ne bouge pas. Apprécions l'aide!

70
demandé sur Joey Morani 2010-08-19 23:39:14

7 réponses

mise à JOUR

ma réponse originale date d'il y a longtemps, et les liens sont rompus; Je l'ai mise à jour pour qu'elle continue d'être utile.

je suis y compris des solutions mises à jour en ligne, ainsi que des exemples de travail sur JSFiddle. Note: je compte sur une réinitialisation CSS, bien que je n'inclue pas ces styles en ligne. Se référer à normaliser.css

Solution 1-Compensation de la 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 des approches différentes:

RÉPONSE ORIGINALE

C'est ça?

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

cette méthode utilise seulement 15 lignes de CSS et à peine N'importe quel HTML markup. Encore mieux, c'est complètement valide CSS, et il fonctionne dans tous les principaux navigateurs. Internet Explorer 5 et plus, 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 est supérieur à la hauteur de la fenêtre du navigateur, vous devrez faire défiler vers le bas pour voir le pied de page... mais si le contenu est inférieure à la hauteur de la fenêtre du navigateur, le pied de page sera bâton vers le bas de la fenêtre du navigateur au lieu de flotter dans le milieu de la page.

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

84
répondu Hristo 2017-12-06 16:51:47

cela fera la div fixée au bas de la page mais dans le cas où la page est longue il ne sera visible que lorsque vous faites défiler vers le bas. 

<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 le dessus de marge doivent être identiques de sorte que le pied de page n'apparaisse pas sur le contenu.

37
répondu ovais.tariq 2010-08-19 19:44:26

votre titre et vos commentaires impliquent que vous n'étiez pas à la recherche d'un pied de page collant (collé au bas de la fenêtre alors que le contenu défile en dessous). Je suppose que vous cherchiez un pied de page qui serait forcé vers le bas de la fenêtre si le contenu ne remplit pas la fenêtre, et poussez vers le bas du contenu si le contenu dépasse la limite de la fenêtre.

vous pouvez accomplir ceci avec ce qui suit. 

&ltstyle>
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;
}
&lt/style>

&ltdiv id="container">
    &ltdiv id="header">header&lt/div>
    &ltdiv id="body">body&lt/div>
    &ltdiv id="footer">footer&lt/div>
&lt/div>

Source: comment conserver les pieds de page au bas de la page

19
répondu Jason George 2012-01-07 06:07:35

check this out, 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
répondu Vinay B R 2010-08-19 20:19:29

utiliser <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 va pas vers le haut

6
répondu 2014-03-08 11:16:36

une solution simple que j'utilise, fonctionne à partir de IE8+

"151920920 Donner" min-height:100% sur le code html, de sorte que si le contenu est moins encore la page prend plein la vue-port de la hauteur et de pied de page des bâtons de bas de page. Lorsque le contenu augmente, le pied de page se déplace vers le bas avec le contenu et continue de coller au fond.

démo de travail de JS fiddle: 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>
3
répondu Sanjeev 2014-09-19 07:12:26

je suis un débutant et ces méthodes ne fonctionnent pas pour moi. Cependant, j'ai essayé une propriété de marge supérieure dans css et j'ai simplement ajouté la valeur des pixels de contenu +5.

exemple: ma mise en page de contenu avait une hauteur de 1000px alors j'ai mis une valeur de marge supérieure de 1005px dans le pied de page css qui m'a donné une bordure de 5px et un pied de page qui se trouve délicieusement au fond de mon site.

probablement une façon amateur de le faire, mais efficace!!!

1
répondu Jamie 2012-05-18 10:11:45