CSS是一種告訴瀏覽器如何呈現HTML元素的樣式表語言。在實際應用中，我們常常需要將某個元素的高度設置為100%以適應父元素的高度。下面我們來看一下如何通過CSS定義高度為100%。

.parent {
height: 500px; /* 父元素高度為500px */
}
.child {
height: 100%; /* 子元素高度為父元素高度的100% */
}

在上述代碼中，我們首先給父元素定義了一個高度為500px的高度，然后在子元素中使用height屬性將高度設置為100%，這樣子元素就會自動適應父元素的高度。

然而，在有些情況下，我們會發現設置高度為100%并沒有達到預期效果。這是因為在CSS中，元素所使用的百分比高度是相對于其父元素的可用空間來計算的。也就是說，如果父元素存在border、padding或margin等占用空間的屬性，那么子元素的高度將不再等于父元素的高度。

.parent {
height: 500px;
padding: 20px; /* 父元素內邊距為20px */
}
.child {
height: 100%; /* 子元素高度并不等于500px */
}

為了解決這個問題，我們可以將父元素的box-sizing屬性設置為border-box，這樣父元素中的padding和border會計算在內，從而保證子元素的高度等于父元素。

.parent {
height: 500px;
padding: 20px;
box-sizing: border-box; /* 父元素內邊距和邊框計算在內 */
}
.child {
height: 100%;
}

通過為父元素設置box-sizing屬性為border-box，我們成功地將子元素的高度設置為了父元素的高度。需要注意的是，在實際應用中，我們不僅要將父元素設置為border-box，在子元素中也需要設置box-sizing屬性，以保證元素內外邊距的計算方式一致。