pied collant ne fonctionne pas .Il y a un grand espace et scrool bar

Question

Je l'ai fait avant, mais cette fois c'est un problème que pied de page n'est pas collant. Il y a aussi un énorme écart entre le pied de page et le contenu, et le scrool sort. Je vous remercie.

header, 
 
nav, 
 
article, 
 
section, 
 
footer, 
 
figure, 
 
aside { 
 
    display: block; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    box-sizing: border-box; 
 
    font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
 
    background-image: url('../img/noiseBack.png'); 
 
} 
 

 
* html #outer { 
 
    /* ie6 and under only*/ 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    font-size: 100%; 
 
    font-weight: normal; 
 
    line-height: 18px; 
 
    font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-font-smoothing: subpixel-antialiased; 
 
    word-wrap: break-word; 
 
    text-shadow: 0 0 1px transparent; 
 
    -webkit-text-size-adjust: 100%; 
 
    background-image: url('../img/noiseBack.png'); 
 
    background-attachment: fixed; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
.container { 
 
    width: 100%!important; 
 
    padding: none; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    overflow: auto; 
 
} 
 

 
#wrapper { 
 
    width: 995px; 
 
    height: 100%; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
 
    padding-bottom: 442px; 
 
    clear: both; 
 
} 
 

 
#wrapper:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
#container { 
 
    position: relative; 
 
    width: 100%; 
 
    display: block; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    padding-bottom: 442px; 
 
} 
 

 
#content { 
 
    margin: 0 20px 30px 20px; 
 
} 
 

 
#footer { 
 
    background-color: #3f3f3f; 
 
    color: #fff; 
 
    width: 100%; 
 
    height: 442px; 
 
    position: relative; 
 
    bottom: 0; 
 
    clear: both; 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div id="content"> 
 
     afdadfadfafadfa 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    dfafadfadfadfad 
 
</div>

bas de page ne fonctionne pas collant est un grand .Il espace et bar scrool

Answer 1

Vous avez défini votre footer comme position: relative;, il ne sera jamais « coller » au bas de la page .

Au lieu de cela, changer le footer à position: fixed;:

#footer { 
    background-color: #3f3f3f; 
    color: #fff; 
    width: 100%; 
    height: 442px; 
    position: fixed; 
    bottom: 0; 
    clear: both; 
} 

En outre, vous avez beaucoup de propriétés inutiles en vous CSS, comme height=100%', min-height` et plus.

---

Utilisez ce Complets CSS:

header, nav, article, section, footer, figure, aside { 
    display: block; 
} 
html, body { 
    min-height: 100%; 
    margin: 0; 
    padding: 0;} 
html { 
    font-family:'Ubuntu','Source Sans Pro', sans-serif!important; 
} 
* html #outer {/* ie6 and under only*/ 
    height:100%; 
} 
body { 
    margin: 0; 
    font-weight: normal; 
    line-height: 18px; 
    font-family:'Ubuntu','Source Sans Pro', sans-serif!important; 
    -webkit-font-smoothing: antialiased; 
    -webkit-font-smoothing: subpixel-antialiased; 
    word-wrap: break-word; 
    text-shadow: 0 0 1px transparent; 
    -webkit-text-size-adjust: 100%; 
    background-image: url('../img/noiseBack.png'); 
    background-attachment: fixed; 
    overflow-x: hidden; 
    position: relative; 
} 
.container { 
    width:100%!important; 
    padding: none; 
    overflow: auto; 
} 
#wrapper { 
    width:995px; 
    margin: 0 auto; 
    background-color: #fff; 
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
    box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
    padding-bottom: 442px; 
    clear: both; 
} 
#wrapper:after { 
    content: ""; 
    display: block; 
} 
#container { 
    position: relative; 
    width: 100%; 
    display: block; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    padding-bottom: 442px; 
} 
#content { 
    margin: 0 20px 30px 20px; 
} 
#footer { 
    background-color: #3f3f3f; 
    color: #fff; 
    width: 100%; 
    height: 300px; 
    position: fixed; 
    bottom:0; 
    clear: both; 
} 

Answer 2

S'il vous plaît voir le code ci-dessous mis à jour.

header, 
     nav, 
     article, 
     section, 
     footer, 
     figure, 
     aside { 
      display: block; 
     } 

     html, 
     body { 

      margin: 0; 
      padding: 0; 
     } 

     html { 
      box-sizing: border-box; 
      font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
      background-image: url('../img/noiseBack.png'); 
      min-height: 100%; 
      position: relative; 
     } 

     * html #outer { 
      /* ie6 and under only*/ 
      height: 100%; 
     } 

     body { 
      margin: 0; 
      height: 100%; 
      font-size: 100%; 
      font-weight: normal; 
      line-height: 18px; 
      font-family: 'Ubuntu', 'Source Sans Pro', sans-serif!important; 
      -webkit-font-smoothing: antialiased; 
      -webkit-font-smoothing: subpixel-antialiased; 
      word-wrap: break-word; 
      text-shadow: 0 0 1px transparent; 
      -webkit-text-size-adjust: 100%; 
      background-image: url('../img/noiseBack.png'); 
      background-attachment: fixed; 
      min-height: 100%; 
      padding-bottom: 50px; 
     } 

     .container { 
      width: 100%!important; 
      padding: none; 
      height: 100%; 
      min-height: 100%; 
      overflow: auto; 
     } 

     #wrapper { 
      width: 995px; 
      height: 100%; 
      position: relative; 
      margin: 0 auto; 
      background-color: #fff; 
      -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
      -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); 
      clear: both; 
     } 

     #wrapper:after { 
      content: ""; 
      display: block; 
     } 

     #container { 
      position: relative; 
      width: 100%; 
      display: block; 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      border: 0; 
     } 

     #content { 
      margin: 0 20px 30px 20px; 
     } 

     #footer { 
      background-color: #3f3f3f; 
      color: #fff; 
      width: 100%; 
      height: 50px; 
      position: absolute; 
      bottom: 0; 
      clear: both; 
     }