web-dev-qa-db-fra.com

Comment puis-je forcer mon pied de page à coller au bas de n'importe quelle page en CSS?

Ceci est mon code:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

Je n'ai aucune idée de ce qui ne va pas avec ça - quelqu'un peut-il aider?

EDIT: pour plus de clarté sur ce qui ne va pas: Le pied de page est affiché en bas comme prévu lors du chargement de la page. Toutefois, lorsque la hauteur de la page Web est supérieure aux dimensions affichées à l'écran, de sorte qu'une barre de défilement apparaît, le pied de page reste au même endroit. C'est-à-dire que lorsque la hauteur de la page est <= 100%, le pied de page est en bas. Toutefois, lorsque la hauteur de la page est supérieure à 100%, le pied de page n'est PAS au bas de la page, mais au bas de l'écran visible.

EDIT: Étonnamment, aucune des solutions ci-dessous n'a fonctionné. J'ai fini par implémenter une barre latérale à la place.

htmlcssfootersticky-footer
25
oxo

Vous recherchez probablement cet exemple :

<div class="wrapper">
    Your content here
    <div class="Push"></div>
</div>
<div class="footer">
    Your footer here
</div>

CSS:

Pour un pied de page de 142 pixels

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .Push {
    height: 142px; /* .Push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
28
SLaks

Essaye ça:

position: fixed;  
bottom: 0;
8
jeegnesh

J'avais la même question, je suis venu ici pour chercher une réponse, je ne l'ai pas trouvée, puis j'ai tenté quelques expériences par moi-même et j'ai finalement eu la solution : 

#body {
  overflow-y: 0 auto;
}
#footer {
  position: fixed;
  top: 100vh; left: 0;
  margin-top: -100px;
  width: 100%; height: 100px;
  padding: 10px;
  color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>

2
Fabricio

Le wrapper est le reste de votre page. Les valeurs de marge/hauteur négatives/positives sont les endroits où la magie opère. 

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .Push 
  {
    height: 142px; /* .Push must be the same height as .footer */
  }
1
k to the z

Ne pas utiliser la position: absolue; pour tout pied de page car la page changera de hauteur. Si c'est absolu, votre pied de page ne bougera pas avec la hauteur de la page.

Vous voulez utiliser la méthode de Ryan Fait.

Bien que je le fasse personnellement comme ça;

.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}

<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>

De cette façon, vous n'avez pas à vous soucier des marges négatives et du remplissage. De plus, cela peut facilement faire partie de html5 en changeant #footer en

<footer>
</footer>
0
PHP

J'ai eu du mal à trouver une solution, aucune des suggestions suggérées n'ayant permis d'atteindre ce que je voulais:

  • S'il y a trop de contenu, restez au bas de la page, pas au milieu.
  • S'il y a suffisamment de contenu, ne collez pas et ne faites pas chevaucher le contenu, restez en bas.
  • Cachez-le dès le premier regard, donc seulement si l'utilisateur fait défiler le pied de page.

C'est ce qui a fonctionné pour moi:

html:

<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>

css:

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

Ici en action.

0
J0ANMM
.footer-small, .Push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

cela fonctionne aussi pour moi ....

0
Makhi Ngubane
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
0
Samuel

C’est ce que j’ai fait et cela a fait que mon pied de page reste en bas. 

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
0
Carla