為什么你寫的height:100%不起作用？
這個知識不算冷門的，但是用的時候可能還是會有些懵逼，不能生效時搜一搜就能找到答案了，但是你真的懂了嗎？為什么想要設置一個全屏元素的時候，高度不受%的控制？
1.百分比寬高的設定
按照w3c中的width和height屬性，可以明確%設定寬高是根據(jù)父元素的寬高來的：
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp
2.width:100%;
我們寫下這樣一段代碼，隨意設置一個背景色便于觀察元素。注意以下代碼，記得加上<!DOCTYPE html>，否則會有所不同。
<body>
<div style="width:100%;height:100%;background-color:blueviolet;">
width:100%;height:100%;
</div>
</body>
//寬100%，我們現(xiàn)在看到的高是屬于font-size的，而不是100%；
<body>
<div style="width:100%;height:200px;background-color:blueviolet;">
width:100%;height:200px;
</div>
</body>
//效果如下
可以看到基本上寬的100%很容易就實現(xiàn)的，但是這里的height卻不能設置成%比的（該元素會消失看不見），這是為什么呢？
3.瀏覽器是如何計算高度和寬度的
Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。即我們不設置寬，會自動填滿整個橫向寬度，如下：
<div style="height:100%;">height:100%;</div>
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗范圍(導致滾動條出現(xiàn))?；蛘吣憬o整個頁面設置一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面并沒有缺省的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據(jù)獲取父元素的高度，也就無法計算自己的高度。
即父元素的高度只是一個缺省值：height: auto;我們設置height：100%時，是要求瀏覽器根據(jù)這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
各個瀏覽器對于寬高的解析也不相同，大家可以自己搜索一下。
4.如何解決
現(xiàn)在你知道了吧，%是一個相對父元素計算得來的高度，要想使他有效，我們需要設置父元素的height;
要特別注意的一點是，在<body>之中的元素的父元素并不僅僅只是<body>，還包括了<html>。
所以我們要同時設置這兩者的height，只設置其中一個是不行的：
html,body{
height: 100%;
margin: 0;
padding: 0;
}
5.關于line-height居中的一點誤解？
<!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為100%沒有居中，這是為什么呢，因為這時候的%是相對于字體尺寸的？所以直接作用于沒有絕對高度的元素是不行的。
line-height屬性說明：https://www.w3school.com.cn/cssref/pr_dim_line-height.asp
這時候要想居中，可以如下，做一個div嵌套，一個負責高度，一個負責居中，雖然感覺并不會這樣用到，但是居中還是很靈驗的~
<!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>
6.源碼
https://github.com/JiaXinYi/ife-study/blob/master/height/height.html
搬運鏈接：
(...) 前端小知識--為什么你寫的height:100%不起作用？_知其所以然——前端 - SegmentFault 思否
到此這篇關于為什么你寫的height:100%不起作用 的文章就介紹到這了,更多相關height:100%不起作用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
