在網頁設計中，我們常常會遇到需要高度百分百的元素的情況。如果我們想要讓一個容器元素的高度鋪滿整個父元素，我們通常會這樣寫：

.container{
height: 100%;
}

然而，在實際操作中，我們會發現這行代碼并不能達到我們期望的效果，容器元素的高度并沒有鋪滿整個父元素。

造成這種情況的原因有很多，其中最主要的原因是我們沒有設置父元素的高度，容器元素無法計算出自己的具體高度。

另外一個原因是盒模型的影響，如果我們設置了容器元素的padding或border，容器元素的實際高度會比設置的高度要大。

針對這些問題，我們可以采取一些解決方案：

1.設置html和body的高度為100%，以確保父元素有具體高度：

html, body{
height: 100%;
}
.container{
height: 100%;
}

2.使用絕對定位的方式，使容器元素鋪滿父元素：

.parent{
position: relative;
}
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

3.使用flex布局來實現鋪滿效果：

.parent{
display: flex;
}
.container{
flex: 1;
}

4.最簡單的方式是設置容器元素的高度為vh，即視口高度的百分比，但這種方式無法兼容所有瀏覽器：

.container{
height: 100vh;
}

綜上所述，要實現高度百分百的效果，我們需要注意父元素的高度以及盒模型的影響，同時選擇合適的解決方案，在實際操作中也要考慮瀏覽器的兼容性。