在實(shí)際開發(fā)過程中，我們經(jīng)常會遇到子元素的高度超過父容器的情況，如果不處理這種情況，頁面將會出現(xiàn)奇怪的滾動條，這對于用戶體驗(yàn)來說不太友好。

在 CSS 中，有一些方法可以解決這個問題：

1. 使用overflow: hidden。這可以將超出父元素的內(nèi)容隱藏。但是，這種方法存在一個缺點(diǎn)，即超出的內(nèi)容被隱藏后，用戶無法通過滾動來查看。

.parent {
height: 100px;
overflow: hidden;
}

2. 使用overflow: auto。這樣可以使超出父元素的內(nèi)容可以滾動查看，但用戶也可能認(rèn)為奇怪的滾動條會干擾他們的閱讀體驗(yàn)。

.parent {
height: 100px;
overflow: auto;
}

3. 使用position: absolute。如果子元素要超出父容器，可以將其定位為絕對定位元素，將其父元素的位置設(shè)置為相對定位，則子元素可以超出其父容器。

.parent {
position: relative;
height: 100px;
}
.child {
position: absolute;
top: 100px;
}

4. 使用flexbox。在使用 flexbox 布局時，可以使用align-items: stretch;，它會將子元素自動拉伸到和父元素一樣的高度。

.parent {
display: flex;
height: 100px;
align-items: stretch;
}

總的來說，每種方法都有它自己的缺點(diǎn)和優(yōu)點(diǎn)，最終選擇何種方法取決于特定的情況。