的CSS高度/最小高度100％的窗口

代碼：的CSS高度/最小高度100％的窗口

<html> 
    <body> 
     <div id="header"> 
     </div> 
     <div id"content"> 
      Some random content 
     </div> 
     <div id="footer> 
     </div> 
    </body> 
</html>

CSS：

html { 
    height: 100%; 
} 
body { 
    width:960px; 
    height: 100%; 
    margin: 0 auto; 
} 
#header { 
    height: 100px; 
} 
#content { 
    min-height: 100%; 
} 
#footer { 
    height: 100px; 
    position: relative; 
    bottom: 0; 
}

問題：因爲我一直在讀什麼，此代碼應做到內容div的高度即使內容較小，也要佔據窗口的所有高度。問題是，即使內容非常小，它也會使窗口高於窗口高度。

我不明白內容的高度可能會超過100％，我該如何解決。

來源

2012-10-14 user1648791

你寫的東西有點混亂，那麼www.codepen.io上的例子呢？ – user319940

所以你想內容div是內容的高度？你的目標是什麼？ –

http://jsfiddle.net/3Hnf4/ – user1648791

它工作正常，你誤解它應該如何工作。您的頁眉和頁腳設置爲100px，因此該網站實際上將200px添加到整個頁面。

如果這是一個複製和粘貼你的HTML錯誤太多，你的內容DIV缺少一個等號（=）和頁腳DIV缺少結束「

你想要的是一個包裝和位置固定在頁腳不是相對的。

http://jsfiddle.net/calder12/ghDUd/1/

來源

2012-10-14 10:29:23

Aaah ok。感謝您的解釋。現在得到它=）！ – user1648791

它需要超過100％，因爲首標是具有100像素，以及，所以頁面具有100％+ 100像素總高度，把內容渦卷內部報頭，這將是快速修復

來源

2012-10-14 10:30:35 aleation

假設正確的代碼：

<html> 
    <head> 
     <style type="text/css"> 
     html { 
height: 100%; 
} 
body{ 
width:960px; 
height: 100%; 
margin: 0 auto; 
} 
#header{ 
height: 100px; 
} 
#content{ 
min-height: 100%; 
} 
#footer{ 
height: 100px; 
position: relative; 
bottom: 0; 
} 
</style> 
</head> 
     <body> 
      <div id="header"> 
      </div> 
      <div id="content"> 
       Some random content 
      </div> 
      <div id="footer"> 
      </div> 
     </body> 
    </html>

content DIV確實有窗口高度的100％。這意味着它結束100px（header的高度）低於窗口高度。如果您希望頁腳始終位於底部，則應在頁腳上使用position: fixed; bottom: 0。

來源

2012-10-14 10:31:29

的CSS高度/最小高度100％的窗口

回答

相關問題