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

在前端開發中，很多時候我們需要讓某個元素的高度自適應父元素的高度，這時我們就會想到使用css的height:100%來實現。但是有時候，我們會發現設置了height:100%后，元素并沒有達到我們預期的效果，而是只有一部分高度。這種情況下，我們需要仔細檢查一下代碼，找到原因。

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

第一種可能就是父元素沒有設置高度，或者是父元素高度為auto。因為如果沒有明確指定父元素的高度，子元素是無法正確的計算自己的高度的。

.parent {
height: auto; /*無法自適應高度，子元素高度也無法計算*/
}
.child {
height: 100%;
}

第二個問題就是父元素設置了padding，但是沒有在計算子元素的高度時把padding算進去，導致子元素的高度沒有達到預期。

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

第三個可能就是在設置height:100%的時候，子元素的祖先元素有設置了position:absolute或者fixed，因為這時候子元素的高度會被限制在祖先元素中，導致無法正確計算。

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

總的來說，如果遇到了css高度100%沒有起作用的情況，我們可以逐個排查以上可能性，找到問題所在，進行適當的調整。希望本文能對大家有所幫助。