スティッキーフッタが動作していません。大きなスペースとスクロールバーがあります。

Question

私は以前これをやっていましたが、今回はフッタがべたつかないという問題があります。また、フッターとコンテンツの間に大きなギャップがあり、scroolが出ています。ありがとうございました。

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>

スティッキーフッター.Thereはあなたがあなたのfooterposition: relative;ように定義され、大きなスペースとscroolバー

Answer 1

で働いて、そうではないことでしょうページの一番下には決して「スティック」 。

代わりに、position: fixed;にfooterを変更します。

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

また、あなたはheight=100%',分-height`などのような不要なプロパティをCSSで、がたくさんあります。

---

使用このフル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

更新されたコードは、以下を参照してください。

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; 
     }