Html設置html與body元素高度問題
阿新 • • 發佈：2017-08-04
wfs ktv vrf pcc xmx vfl uft map vra
為什麽要設置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元素高度問題