Faire un pied de page CSS soit assis au bas de la fenêtre du navigateur ou en bas du contenu

Double de cette question.

J'ai un site existant (jacquelinewhite.co.royaume-uni), sur elle il y a un pied de page. Actuellement, ce pied de page se situe toujours en dessous du contenu principal. Je suis en train de faire flotter vers le bas de la fenêtre du navigateur, ou si le contenu est plus grand que la fenêtre de rester au fond du contenu.

Efficacement le code HTML est structuré comme suit:

<div id="container">
  <div id="top_bar">
  </div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>

J'ai essayé de position absolue, inférieure à 0, ce qui met le pied de page en bas de la fenêtre, mais si le contenu de la fenêtre est plus grande que le pied de page couvre le contenu.

Comment dois-je résoudre ce problème?

source d'informationauteur ilivewithian

  1. 31

    Cela a toujours bien fonctionné pour moi: CSS Collant Pied de page

  2. 4

    Tester cette...

      body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }
  3. 0

    En supposant que vous utilisez le pied de page() de l'élément que j'ai trouvé juste en ajoutant cette CSS a fonctionné pour moi

    html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}