標籤：too type 常見 cga ott ref awl fnr svn
為什麼要設定HTML和body的高度？在一些比較正規的網站經常見到會設定html與body的高度。是為了後面的div高度正確的顯示。
div的100%是從其上一級div的寬高繼承來的，有一點很關鍵，就是要設定div100%顯示，必須設定其上一級div的寬度或高度，否則無效。
前面總得有個容器說明他的高度是多少。這樣的話div才能按比例100%繼承上一級的高度可惜的是瀏覽器一般預設解釋為內容的高度，而不是100%。
解決方案：
只要為html和body設定高度為100%就可以了html,body{height:100%;}這樣之後div會按比例來繼承上一級的高度了.僅僅設定的DIV元素的height屬性貌似沒有什麼效果。
另外，你問“html{height:100%}是什麼意思呀，難道高度是相對瀏覽器的？”的確，這裡的height:100%是相對於瀏覽器高度來說的。瀏覽器高度不是頁面的高度！
--------------------例1:（只給div設定高度，頁面高度30%無效）--------------------
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="" style="border: 1px solid green;height: 30%;"> div1 </div> <div id="" style="border: 1px solid green;height: 30%;"> div2 </div> <div id="" style="border: 1px solid green;height: 30%;"> div3 </div> </body></html>
結果:
----------------------只給body設定高度100%仍然無效----------------
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height:100%; } </style> </head> <body> <div id="" style="border: 1px solid green;height: 30%;"> div1 </div> <div id="" style="border: 1px solid green;height: 30%;"> div2 </div> <div id="" style="border: 1px solid green;height: 30%;"> div3 </div> </body></html>
結果:
-----------------------同時給html與body設定100%----------------------
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ height:100%; } </style> </head> <body> <div id="" style="border: 1px solid green;height: 30%;"> div1 </div> <div id="" style="border: 1px solid green;height: 30%;"> div2 </div> <div id="" style="border: 1px solid green;height: 30%;"> div3 </div> </body></html>
結果:
總結:
百分比的寬度是相對於其父元素而言，一種方法用單位明確指定父元素的高度，另一種辦法就是上面介紹的從html,body開始用百分比繼承。html的百分比是相對於瀏覽器而言，其他是相對於其父元素而言。也就是說應該養成一個好的習慣，寫html網頁時候上來就把html,body{height:100%}寫上去。這樣後面的div就可以用百分比起作用了。
Html設定html與body元素高度問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
