スティッキーフッタがスクロールバーを追加

Question

私は自分のページにスティッキーフッタを付けるようにしています。
私はこのチュートリアルでそれをしようとしています：https://css-tricks.com/snippets/css/sticky-footer/。
私は彼らがそこで言いましたが、フッターは粘着性になりますが、スクロールバーがページに追加されました。コンテンツがページの最後まで届かないことさえあります。
私のCSS：

html, body { 
    height: 100%; 
} 
#wrapper { 
    min-height: 100%; 
    margin-bottom: -40px; 
} 
#wrapper:after { 
    content: ""; 
    display: block; 
} 
#footer, #wrapper:after { 
    height: 40px; 
} 

フィドル https://jsfiddle.net/k3zvaxLs/

Answer 1

あなたのh1要素には、本体要素が押し下げられるデフォルトのマージンがあります。

h1のCSSを編集して余白をパディングに置き換えます。

#mainHeader h1 { 
    text-align: center; 
    color: blue; 
    margin: 0; 
    padding: 0.67em; 
} 

スニペットがあります。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
#wrapper { 
 
    min-height: 100%; 
 
    margin-bottom: -40px; 
 
} 
 

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

 
#footer, 
 
#wrapper:after { 
 
    height: 40px; 
 
} 
 

 
body { 
 
    direction: rtl; 
 
    margin: 0; 
 
} 
 

 
#searchWrapper { 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
#mainHeader { 
 
    padding-bottom: 15px; 
 
    border-bottom: 2px solid blue; 
 
    margin-bottom: 15px; 
 
} 
 

 
#mainHeader h1 { 
 
    text-align: center; 
 
    color: blue; 
 
    margin: 0; 
 
    padding: 0.67em; 
 
} 
 

 
#searchWrapper input[type=search] { 
 
    width: 100%; 
 
    border: 1px solid lightgray; 
 
    height: 30px; 
 
    padding: 5px 
 
} 
 

 
#searchWrapper input[type=submit] { 
 
    position: absolute; 
 
    transform: translateX(-100%); 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    height: 30px; 
 
    padding: 5px; 
 
    background-color: lightgray; 
 
    border: 1px solid gray; 
 
} 
 

 
.result { 
 
    margin-bottom: 15px; 
 
} 
 

 
.searchResult { 
 
    width: 45%; 
 
    margin-right: 15px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.url { 
 
    color: green; 
 
} 
 

 
.searchResult .description { 
 
    font-size: 15px; 
 
    line-height: 16px; 
 
    height: 32px; 
 
    overflow: hidden; 
 
    text-align: right; 
 
} 
 

 
#pagination { 
 
    text-align: center; 
 
} 
 

 
#footer { 
 
    padding: 15px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    background-color: lightgray; 
 
}

<div id="wrapper"> 
 
    <header id="mainHeader"> 
 
    <h1>Ami's Search Enginge</h1> 
 
    <div id="searchWrapper"> 
 
     <form method="get"> 
 
     <input type="search" name="query" placeholder="הזן טקסט לחיפוש" /> 
 
     <input type="submit" name="search" value="חפש" /> 
 
     </form> 
 
    </div> 
 
    </header> 
 
    <section class="result"> 
 
    <article class="searchResult"> 
 
     <header class="title"> 
 
     <a href="#">כותרת תוצאת חיפוש</a> 
 
     <br /> 
 
     <span class="url">http:://www.google.co.il</span> 
 
     </header> 
 
     <section class="description"> 
 
     תיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור 
 
     תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור 
 
     תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור 
 
     תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאור 
 
     </section> 
 
    </article> 
 

 
    <footer id="pagination"> 
 
     <a href="#">&lt;</a> 
 
     <a href="#">1</a> 
 
     <a href="#">2</a> 
 
     <a href="#">3</a> 
 
     <a href="#">4</a> 
 
     <a href="#">5</a> 
 
     <a href="#">&gt;</a> 
 
    </footer> 
 
    </section> 
 
</div> 
 
<footer id="footer"> 
 
    All Right Reserved To Ami 
 
</footer>

Answer 2

html, body { 
    height: 100%; 
    overflow-x: hidden; 
} 

Answer 3

あなたが追加する必要が参照しているチュートリアルと一致するには：これはあなたのCSSに追加されると

* { 
     margin: 0; 
} 

をあなたのフィドルは正しく動作します

Answer 4

ラッパーはまた、100％の高さを有する本体、100％の高さを有するが、それはまた、よりトータル外側の高さも大きくなって、上マージンを有しています窓の高さ！

ボディのマージンが0に設定されていると思うかもしれませんが、マージンが崩れるという問題があります。#wrapperの#mainHeaderの最初のh1にはデフォルトマージンがあるため、マージンもそのマージンになります。

解決策：h1の上部マージンも0に設定してください。

#mainHeader h1 { 
    text-align:center; 
    color:blue; 
    margin-top:0; 
} 

New fiddle。