最近在做前端頁面的時(shí)候，遇到了一個(gè)問題，就是設(shè)置css高度為100%沒有效果。一開始以為是自己的代碼問題，后來發(fā)現(xiàn)還有其他人也遇到了這個(gè)問題，于是就來總結(jié)一下。

在前端開發(fā)中，很多時(shí)候我們需要讓某個(gè)元素的高度自適應(yīng)父元素的高度，這時(shí)我們就會(huì)想到使用css的height:100%來實(shí)現(xiàn)。但是有時(shí)候，我們會(huì)發(fā)現(xiàn)設(shè)置了height:100%后，元素并沒有達(dá)到我們預(yù)期的效果，而是只有一部分高度。這種情況下，我們需要仔細(xì)檢查一下代碼，找到原因。

.parent {
height: 500px;
}
.child {
height: 100%;
}

第一種可能就是父元素沒有設(shè)置高度，或者是父元素高度為auto。因?yàn)槿绻麤]有明確指定父元素的高度，子元素是無法正確的計(jì)算自己的高度的。

.parent {
height: auto; /*無法自適應(yīng)高度，子元素高度也無法計(jì)算*/
}
.child {
height: 100%;
}

第二個(gè)問題就是父元素設(shè)置了padding，但是沒有在計(jì)算子元素的高度時(shí)把padding算進(jìn)去，導(dǎo)致子元素的高度沒有達(dá)到預(yù)期。

.parent {
height: 500px;
padding: 50px;
}
.child {
height: 100%;
}

第三個(gè)可能就是在設(shè)置height:100%的時(shí)候，子元素的祖先元素有設(shè)置了position:absolute或者fixed，因?yàn)檫@時(shí)候子元素的高度會(huì)被限制在祖先元素中，導(dǎo)致無法正確計(jì)算。

.grand-parent {
position: absolute; /*限制了子元素高度*/
}
.parent {
height: 500px;
}
.child {
height: 100%;
}

總的來說，如果遇到了css高度100%沒有起作用的情況，我們可以逐個(gè)排查以上可能性，找到問題所在，進(jìn)行適當(dāng)?shù)恼{(diào)整。希望本文能對大家有所幫助。