使用CSS，如果內容不滾動，我怎樣才能讓我的文檔擴展到用戶的視口？

Question

我很難理解min-height應該如何工作。我想如果我把它放在一個包裝的div上，它會相應地擴大。

如果您的瀏覽器足夠大，頁腳下方會有很大的空間。如果頁面沒有太多內容，如果頁腳觸及視口的底部，我希望它。

否則，如果有大量的內容，那麼頁面顯然應該相應地滾動。

我的HTML文檔設置像這樣（爲簡便起見，我已經刪除了所有的內容和我只是顯示了嵌套結構）：

<div id="container"> 
     <div id="top" class="five-box-shadow full-ten-border"> 
      <div id="header" class="top-ten-radius"> 
       <div id="logo"> 
       </div> 
       <div id="topbar"> 
       </div> 
      </div> 
     <div id="nav" class="bottom-ten-radius"> 
      <ul id="tabnav"> 
      </ul> 
     </div> 
     <div class="clearer"></div> 
     </div> 
     <div id="wrapper" class="full-ten-border five-box-shadow"> 
      <div id="content" class="full-ten-border"> 
       <div id="main"></div> 
       <div id="secondary"></div> 
       <div class="clearer"></div> 
      </div> 
      <div id="footer" class="bottom-ten-radius"></div> 
     </div> 
</div> 

和所附的CSS，我認爲會工作：

#container { 
    width: 880px; 
    margin-left: auto; 
    margin-right: auto; 
    /*margin-top: 5px;*/ 
    min-height:100%; 

} 

現在，如果我改變#container有height: 100%，它會延伸下來，但它會走的太遠，並創建滾動條。

我該怎麼辦？

Answer 1

通常，額外空間是body和html標籤上的填充/邊距（通常是瀏覽器自動添加它）的結果。

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

與高度100％+利潤/填充內部對象仍然可以推動這一點，所以你必須保持警覺，或使用溢出：隱藏的地方。

Answer 2

min-height只是規定了最低高度的股利可以由用戶降至，

我提到有人對這些早期這正是你需要將其設置爲底部幾乎沒有內容的瀏覽器是什麼：

http://www.alistapart.com/articles/fauxcolumns/

Answer 3

聽起來像你希望你的頁腳總是坐在頁面的底部？

可以通過設定以下樣式您頁腳ID實現這一目標：

#footer{ 
position:fixed; 
bottom:0; 
} 

您可能需要添加一些其他的造型，但應該讓你對你的方式。