高さ100％のDIVは内容がなくても高すぎます

Question

sticky footerを実装しようとしていますが、主なラッピングdivの100％の高さが高すぎます（＃body-wrap）コンテンツとフッターの間のギャップ。そのため、画面の下部にあるフッターの代わりに、ページを下にスクロールして表示する必要があります。

私はHTMLのように、このような何かを持っている：

<div id="body-wrap"> 

    <div id="content"> 

      [about 100px of content here] 

    </div><!-- end #content --> 

<div class="push"></div> 

</div><!-- end #body-wrap --> 

<div id="footer-wrap"> 

    <div id="footer-content"> 

       [about 300px of content here] 

    </div> <!-- end #footer-content --> 

</div> <!-- end #footer-wrap --> 

そして、私のCSS：

html, body { 
height: 100%; 
} 

#body-wrap { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -300px; /* the bottom margin is the negative value of the footer's height */ 
} 

.footer-main-wrap, .push { 
height: 300px; /* .push must be the same height as .footer */ 
} 

誰もが、なぜ100％の高さは内容よりもさらに延長する任意のアイデアがありますか？

Answer 1

あなたは割合（例えば、height: 100%）と高さを指定すると、それは親コンテナ、ない内容要素のに関連しています。 IE6をサポートする必要がない場合は、フッターにposition: fixedを使用して実装する方がはるかに簡単です。

---

編集：マークアップでは、IDが footer-wrapの要素がありますが、CSSではセレクタ .footer-main-wrapを使用しています。 CSSの .footer-main-wrapを #footer-wrapに変更してみてください。あなたの bodyにあなたのhtml と height autoに height 100%を追加

Answer 2

はあなたの元に `" `、それはページが