web-dev-qa-db-fra.com

Comment empêcher Sticky Footer de couvrir le contenu ...?

J'utilise un pied de page "collant", mais sur quelques pages, il recouvre le contenu. Y a-t-il un moyen d'éviter cela, mais en conservant sa qualité "collante"?

J'ai essayé d'utiliser min-height: sur HTML et body, mais cela n'a pas fonctionné.

CSS: 

html {
    background: black url(images/bg2.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}
#container {
    min-height: 100%;
    position: relative;
    height: 100%;
    min-width: 900px;
    overflow: hidden;
}
#body {
    padding-bottom: 100px;
    float: left;
    background-color: rgba(0,0,0,0.7);
    width: 750px;
    height: 400px;
}
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
}

HTML: 

<body>

<div id="container">

  <div id="header">
    <div class="logo">C</div>

     <ul class="main_nav">
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="music.html">Music</a></li>
       <li><a href="services.html">Services</a></li>
       <li><a href="gallery.html">Gallery</a></li>
       <li><a href="contact.html">Contact</a></li>
     </ul>
  </div>

  <div id="body">
   <div id="bio_wrapper">

   </div>
  </div>

  <div id="footer">
    <span class="footer_text">Copyright © 2013<br />All Rights Reserved.</span>
  </div>

</div>

</body>
htmlcsscss3footersticky-footer
11
pianoman

Comme déjà dit, vous devriez mettre un margin-bottom pour votre body et utiliser min-height au lieu de height:

body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
}

Et vous devriez enlever height: 100% from <body>

J'espère que cela t'aides!

16
LRA

Si votre division de corps est fermée avant le début de la division de pied de page, utilisez la propriété margin-bottom. Exemple si la structure de la page est

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

puis écrire

#body{
   margin-bottom: (height of your footer);
}

Si votre structure de code n'est pas comme ça. Je veux dire que votre div de bas de page est à l'intérieur de la div de corps. Ensuite, utilisez cette propriété de bas de marge pour la div qui se ferme juste avant le début de div de bas de page. 

5
amit ghosh

Regardez cette solution . Vous pouvez utiliser le positionnement absolu pour tous vos éléments de contenu principaux (en-tête, article, pied de page). Utilisez les requêtes @media pour créer des coupures à différentes résolutions si vous devez modifier la hauteur de l'en-tête ou du pied de page pour différentes largeurs d'écran (conception adaptative), et indiquez à votre zone de contenu principale de masquer le débordement. Vous pouvez également utiliser les présentations relatives flottantes dans les zones de contenu principales.

2
Craig

Dans la dernière division avant le pied de page, ajoutez simplement style = "height: 100%; padding-bottom: 0;" pour écraser les règles générales avec lesquelles vous êtes probablement en conflit.

0
negman