為什麼你寫的height:100%不起作用？
這個知識不算冷門的，但是用的時候可能還是會有些懵逼，不能生效時搜一搜就能找到答案了，但是你真的懂了嗎？為什麼想要設定一個全屏元素的時候，高度不受%的控制？
1.百分比寬高的設定
按照w3c中的width和height屬性，可以明確%設定寬高是根據父元素的寬高來的：
http://www.w3school.com.cn/cs…
http://www.w3school.com.cn/cs…
2.width:100%;
我們寫下這樣一段程式碼，隨意設定一個背景色便於觀察元素
|
1 2 3 4 5 6 |
<body> <div style="width:100%;height:100%;background-color:blueviolet;"> width:100%;height:100%; </div> </body> //寬100%，我們現在看到的高是屬於font-size的，而不是100%； |
|
1 2 3 4 5 6 |
<body> <div style="width:100%;height:200px;background-color:blueviolet;"> width:100%;height:200px; </div> </body> //效果如下 |
可以看到基本上寬的100%很容易就實現的，但是這裡的height卻不能設定成%比的（該元素會消失看不見），這是為什麼呢？
3.瀏覽器是如何計算高度和寬度的
Web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。即我們不設定寬，會自動填滿整個橫向寬度，如下：
|
1 |
<div style="height:100%;">height:100%;</div> |
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設定一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面並沒有預設的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。
即父元素的高度只是一個預設值：height: auto;我們設定height：100%時，是要求瀏覽器根據這樣一個預設值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
各個瀏覽器對於寬高的解析也不相同，大家可以自己搜尋一下。
參考：http://www.webhek.com/post/cs…
4.如何解決
現在你知道了吧，%是一個相對父元素計算得來的高度，要想使他有效，我們需要設定父元素的height;
要特別注意的一點是，在
之中的元素的父元素並不僅僅只是，還包括了。
所以我們要同時設定這兩者的height，只設定其中一個是不行的：
|
1 2 3 4 5 |
html,body{ height: 100%; margin: 0; padding: 0; } |
5.關於line-height居中的一點誤解？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html,body{ height: 100%; margin: 0; padding: 0; } div { color: white; text-align: center; font-size: 30px; line-height: 100%; background-color: blueviolet; } </style> </head> <body> <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> --> <div style="height:100%;">height:100%;</div> <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> --> </body> </html> |
line-height屬性說明：http://www.w3school.com.cn/cs…
這時候要想居中，可以如下，做一個div巢狀，一個負責高度，一個負責居中，雖然感覺並不會這樣用到，但是居中還是很靈驗的~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { height: 100%; margin: 0; padding: 0; } .div1 { background-color: blueviolet; position: relative; } .div2 { font-size: 30px; color: white; text-align: center; width: 400px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } </style> </head> <body> <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> --> <div style="height:100%;" class="div1"> <div class="div2">height:100%;</div> </div> <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> --> </body> </html> |
