web-dev-qa-db-fra.com

Comment faire un pied de page fixe dans le bas de la page

Dans mon html, j'ai un div classé "pied de page". Je veux qu'il ait un bg à # 000 et occupe toute la largeur de la page et ne laisse aucun espace après.

J'utilise actuellement ce CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

Mais la largeur de la page complète n'est pas remplie avec ce code CSS.

De l'aide? Merci!

cssfooter
12
rodrigoalves

J'utilise le pied de page collant: http://ryanfait.com/sticky-footer/

/*

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

    */

* {
  margin: 0;
}

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 */
}
<div class='wrapper'>
  body goes here
  <div class='Push'></div>
</div>
<div class='footer'>Footer!</div>

Pour l’essentiel, l’emballage a une hauteur de 100%, avec une marge négative pour le pied de page, ce qui garantit que le pied de page est toujours en bas sans provoquer de défilement.

Cela devrait vous permettre d’obtenir un pied de page de largeur 100% et un corps plus étroit également, car les div sont des éléments de niveau bloc et que leur largeur correspond par défaut à 100% de leur parent. Gardez à l'esprit que le pied de page ici n'est pas contenu par la division wrapper.

21
Chris Sobolewski

vous pouvez rendre le pied de page div absolu à la page comme ceci:

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}
2
Jason

J'utilise quelques éléments DIV pour chaque section de mes pages Web.

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

Chaque section est relativement positionnée. En utilisant le wrapping DIVs, je peux définir pour le wrapper une largeur spécifique et les éléments qu'il contient peuvent être 100% width.

Je vous suggère de vous écarter du positionnement absolu et du flottement, car ils créent des problèmes de compatibilité et peuvent donc ne pas apparaître correctement sur tous les navigateurs.

1
Jared

Ce problème que je rencontrais lorsque j'ai démarré une application Web à l'aide du menu Bootstrap et du pied de page fixe, quelle que soit la résolution du navigateur.

Utilisez le style ci-dessous pour l'élément de pied de page

Style en ligne

Feuille de style externe utilisant l'attribut de classe dans Div

  <div class="footer"></div>

style.css

  .footer
  {
   backgroud-color:black;
   position:fixed;
   bottom:0;
   height:2%;
  }

Feuille de style externe utilisant l'attribut id dans Div

 <div id="divfooter"></div>

style.css

 #divfooter
 {
  backgroud-color:black;
  position:fixed;
  bottom:0;
  height:2%;
 }
0
reachyathish

Vous pouvez utiliser ces styles dans votre CSS pour atteindre votre objectif.

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

Si vous utilisez bootstrap, essayez avec margin-left: -15px et margin-right: -15px mais cela ne sera pas nécessaire dans la plupart des cas si vous avez votre propre classe. 

0
Isaac Shrestha

si vous voulez que votre pied de page soit fixé sur votre page:

.footer{ position:fixed;}

mais si vous voulez que votre pied de page soit fixe en fin de page: 

regarde ça

0
8611670474

html: 

<div class="footer">
    <p>
        Some text comes here! &copy; 2015 - 2017
    </p>
</div>

css:

.footer {
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(59, 67, 79);
    position: fixed;
    bottom: 0%;
    margin-top: 50%;
}

* {
    padding: 0;
    margin: 0;
}
0
Kristóf Köblös

Je suis heureux du soutien que vous avez tous fourni. Chacune de ces réponses m'a en quelque sorte aidé. Je suis venu à ce code:

.footer {
  height: 59px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  top: 508px;
}

Merci!

0
rodrigoalves