即使沒有內容，100％高度的DIV也太高

我試圖實現sticky footer，它的工作原理除了主包裝div的100％高度延伸方式太高（＃body-wrap），並導致巨大內容和頁腳之間的差距。因此，而不是像它應該坐在屏幕底部的頁腳，我必須向下滾動頁面以超過巨大的差距來查看它。即使沒有內容，100％高度的DIV也太高

我有這樣的事情作爲我的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％的高度將大於內容進一步擴大？

來源

2011-09-17 beowulf

你也忘了加引號，'「'在原始來源？當我準備好我的答案時，結尾引號的缺失導致了不同的佈局（FF 3.6.22）。 –

如果指定高度百分比（例如，height: 100%），這是相對於父容器，而不是內容元素的。如果你不需要支持IE6，你可能會發現使用position: fixed來實現頁腳更容易實現。

編輯：我只是注意到另一件事 - 在你的標記你有一個元素ID footer-wrap，但在你的CSS，你使用的選擇器 .footer-main-wrap。嘗試將您的CSS中的 .footer-main-wrap更改爲 #footer-wrap。

來源

2011-09-17 14:41:44 jmar777

你是對的，它考慮了母公司的高度，似乎解決了這個問題100％高度的時間太長了，但現在我遇到了一個問題，在我的頁腳下面有一個很大的差距呃... – beowulf

差距有多大？如果我t的大小在10-15px左右，它可能是body元素的默認邊距。 @羅布的回答會有幫助，即把'body {margin：0;在你的樣式表中。 – jmar777

瓶口間隙約爲180px。添加正文{margin：0; }似乎沒有任何區別。 – beowulf

添加 height 100%到HTML 和 heightauto您body將使它正確調整頁面時不夠長

來源

2012-06-10 02:48:06 randee

即使沒有內容，100％高度的DIV也太高

回答

相關問題