Faire en sorte que le pied de page se colle correctement au bas de la page

Question

Faire en sorte que le pied de page se colle correctement au bas de la page

Demandé el 9 de Août, 2010: Quand la question a-t-elle été
122362 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Comment obtenez-vous le pied de page pour rester au bas d’une page Web ? (5 réponses )

J'essaie de faire en sorte que mon pied de page (un simple div contenant une ligne de texte) soit en bas de l'écran si le contenu ne va pas jusqu'en bas, ou en bas du contenu si celui-ci nécessite des barres de défilement. Si le contenu ne nécessite pas de barres de défilement, cela fonctionne parfaitement, mais lorsque le contenu est trop long, le pied de page se trouve toujours au même endroit, juste au-dessus du contenu.

Ma structure div de base est :

<div id="container">
    <div id="body"></div>
    <div id="footer"></div>
</div>

Mon CSS correspondant (quelque peu dépouillé) :

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}

Demandé el 9 de Août, 2010 par James Simpson

2 votes

Cette question n'a pas de réponse fiable dans le lien fourni. La réponse acceptée devrait être celle fournie par Vinicius José Latorre dans cette question car elle est très claire et fonctionne.

Commenté el 12 de Mai, 2017 par Exel Gamboa

0 votes

Peut-être que le problème se situe au niveau de la balise html ou body. ce lien m'a aidé : makandracards.com/makandra/

Commenté el 3 de Juin, 2020 par sina

Answer 1

5 Réponses

Answer 2

232voto

Vinicius José Latorre Points 101

La solution la plus simple consiste à utiliser min-height sur le <html> et positionner la balise <footer> con position:absolute;

Démo : jsfiddle et SO snippet :

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}

footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
}

<article>
    <!-- or <div class="container">, etc. -->
    <h1>James Dean CSS Sticky Footer</h1>
    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
<footer>
    <h1>Footer Content</h1>
</footer>

Répondu el 5 de Août, 2013 par Vinicius José Latorre (101 Points )

5 votes

J'ai également apprécié - merci. Cependant, une question : pourquoi le "overflow : hidden ;"?

Commenté el 4 de Juillet, 2015 par daOnlyBG

2 votes

C'est une solution plutôt sympa. Le seul inconvénient est la position absolue de la hauteur du pied de page... :/. J'ai quand même utilisé votre solution :)

Commenté el 27 de Novembre, 2015 par simon

1 votes

Pour référence future : cela ne fonctionnait pas pour moi au début parce que j'avais explicitement mis html { height: 100%; } .

Commenté el 15 de Avril, 2017 par Niek

Afficher 8 autres commentaires

Answer 3

70voto

Joshua Points 1578

Vous aurez besoin d'un HTML un peu plus complexe pour faire ce que vous voulez :

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

Répondu el 9 de Août, 2010 par Joshua (1578 Points )

Answer 4

26voto

Nicolas Viennot Points 1935

Pourquoi ne pas l'utiliser : { position: fixed; bottom: 0 } ?

Répondu el 9 de Août, 2010 par Nicolas Viennot (1935 Points )

132 votes

Parce que le pied de page couvrira le corps du texte.

Commenté el 4 de Mai, 2011 par cope360

25 votes

-1 car alors votre pied de page vous suivra au fur et à mesure que vous défilez.

Commenté el 27 de Mai, 2013 par ShalomSam

0 votes

Comment position: static ? Cela fonctionne mieux pour moi !

Commenté el 5 de Décembre, 2013 par Zain Shaikh

Afficher 1 autres commentaires

Answer 5

19voto

Sanjeev Points 233

Une solution simple que j'utilise, qui fonctionne à partir d'IE8+.

Donnez min-height:100% sur le html de sorte que si le contenu est inférieur, la page prend toute la hauteur de la fenêtre d'affichage et le pied de page reste en bas de la page. Lorsque le contenu augmente, le pied de page se déplace vers le bas avec le contenu et reste collé au bas de la page.

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>

Répondu el 19 de Septembre, 2014 par Sanjeev (233 Points )

Answer 6

12voto

peterjmag Points 1978

Une autre solution, sans DIVs vides :

http://www.cssstickyfooter.com/

Répondu el 9 de Août, 2010 par peterjmag (1978 Points )

Faire en sorte que le pied de page se colle correctement au bas de la page

Réponses

Css

Html

Questions en vedette

Top Tags

Prograide.com

Powered by:

Faire en sorte que le pied de page se colle correctement au bas de la page

Réponses

Css

Html

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: