2012-10-14 99 views
0

代碼:的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%,我該如何解決。

+0

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

+0

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

+0

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

回答

3

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

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

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

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

+0

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

0

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

0

假設正確的代碼:

<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