100％的身體和100％的最小高度，但內容延伸到瀏覽器屏幕

我知道我已經看到了這個問題的解決方案，但我無法在我的生活中找到它。100％的身體和100％的最小高度，但內容延伸到瀏覽器屏幕

我已經將html和body元素擴展到了dom的100％。他們也有100％的最小高度。問題是，當我的內容延伸過去的瀏覽器屏幕底部的身體不會與它擴展：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Damn you body, extend!!</title> 
     <style type="text/css"> 
      html,body{ 
       height  :100%; 
       min-height :100%; 
      } 
      html{ 
       background-color:gray; 
      } 
      body{ 
       width   :90%; 
       margin   :auto; 
       background-color :white; 
      } 
      body > div{ 
       background-color :red; 
       height   :50px; 
       width   :80px; 
       margin   :auto; 
       text-align  :center; 
      } 
     </style> 
    </head> 
    <body> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
     <div>testitem <br />testItem</div> 
    </body> 
</html>

我可以發誓的最小高度會導致身體延伸到適合的內容，但我顯然是錯的。有人能指出它真的很快嗎？

來源

2014-05-12 Chris Schmitz

應該可以正常工作，如果你只是設置一個min-height：

html, body { 
    min-height: 100%; 
}

正如你可以在這裏看到：http://jsfiddle.net/7hg7m

來源

2014-05-12 02:36:08 pzin

對，我就是這麼想的。這是我上面示例中聲明的第一條css規則。 –

啊，我明白了。高度和高度是相互矛盾的。我刪除了高度規則，它工作正常。謝謝！ –

*你可以吃至少2個蘋果*和*你會吃2個蘋果*所以，如果你是一個好孩子，你最終會吃2個蘋果，不會有3個，也不會更多。 :-) – pzin

這應該工作：

html,body { 
    /* height: 100%; */ 
    min-height: 100%; 
}

來源

2014-05-12 02:38:21 user3091574

嘗試，因爲你卸下height財產已經設置了min-height財產，否則可能會有衝突。希望能幫助到你！

來源

2014-05-12 02:45:04

100％的身體和100％的最小高度，但內容延伸到瀏覽器屏幕

回答

相關問題