使用高度百分比時，這些額外像素來自哪裏？

我目前正在嘗試使用粘貼頁腳，我已經成功地使用了多次，之前我已經創建了各種網站。這裏是鏈接：http://ryanfait.com/sticky-footer/使用高度百分比時，這些額外像素來自哪裏？

這次的問題是，我試圖讓這個更響應，因此我不想使用一個特定的像素量的高度，所以我試圖切換到百分比：

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

#wrapper{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: -25%; 
    background: lime 
} 

#spacer{ 
    background: blue; 
    height: 25%;    /* This should be exactly the same as #footer height. */ 
} 

#footer{ 
    background: magenta; 
    height: 25%; 
}

這裏是HTML：

<!DOCTYPE html"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 

     <link href="https://localhost/wordpress/wp-content/themes/TesterTheme/style.css" rel="stylesheet" type="text/css" /> 

    </head> 

    <body> 
     <div id="wrapper"> 

Content goes here. 

</div><!-- End Wrapper --> 

<div id="spacer"></div> 

<div id="footer"> 
</div> 

</body> 
</html>

正如我以前說過，當我使用一個特定的像素數量，比如200像素，對於高（和改變包裝下邊距來-400px ）它工作正常。我已經讀過，當你使用高度的百分比時，它使用了父元素高度的百分比，我需要確保定義所有祖先元素的高度。我認爲我儘管...因爲body和html是頁腳的唯一祖先。這實際上是它所做的。我用一個像素尺測量了它，頁腳和隔離片測量了我觀看端口的25％。然而，因爲上帝知道爲什麼，我的瀏覽器側面出現了一個滾動條（是的......它是全屏），就好像身體有一些神奇地將自己延長了五十個像素左右。請大家幫忙，我已經花了九個小時到目前爲止，全面搜索並嘗試許多不同的戰術，但我總是得到相同的結果。爲什麼百分比不能達到預期的結果？

來源

2013-04-09 Digital Brent

請注意：我已經在Chrome，FF，IE中試過了，它們都給出了相同的結果。 – 2013-04-09 20:57:57

它的'margin-bottom：-25％;'這會導致頁腳和spacer之間的高度差異。當使用帶有margin的百分比時，它始終相對於元素的** width **，即使您'重新使用上下邊距 – Adrift 2013-04-09 20:58:17

那麼，我如何讓百分比等於高度呢？另外我不確定你的意思是有什麼區別。我的描述可能不夠清楚。頁腳和間隔符的高度相同：204px。我的視口是814px。即使我將包裝底邊改爲-50％，body和html仍然會出現814，但footer仍然比firebug說身體結束的位置低50個像素。 – 2013-04-09 21:05:18

有很多選項可以解決這個問題。以你所使用的方式使用百分比並不是一個好主意..它類似於this可以在javascript中更改。

就我個人而言，我會走這條路線作出迴應。

<div class="wrap"> 
    <div class="stuff"></div> 
    <div class="stuff"></div> 
    <div class="stuff"></div> 
</div> 
<div id="footer"></div>

這樣，頁腳始終設置爲低於其餘內容。無需在多個位置指定頁腳高度。使用這個設置你喜歡百分比。

如果您對此不滿意，請使用jQuery/javascript來展開內容。甚至是CSS媒體查詢。

來源

2013-04-09 21:08:37

謝謝，我不太清楚你最初的意思，但我最終所做的只是給內容打分75％的高度，然後給了頁腳25％的高度。這似乎工作正常。現在看起來很明顯。我無法相信我浪費了太多時間來試圖讓愚蠢的事情發揮作用。 – 2013-04-10 15:27:02

它發生在我們身上。最主要的是永遠不會放置更多的代碼。始終從頂層向下層疊。 CSS只做很多事情，那麼現在是時候研究javascript並確保它正確地回退。快樂的編碼！ – 2013-04-10 15:40:01

使用高度百分比時，這些額外像素來自哪裏？

回答

相關問題