今天我們來談一下CSS高度百分比不滾動的問題。 在設計Web頁面時，我們經常會使用百分比來設置元素的寬度和高度，這樣可以適應不同尺寸的屏幕。但是，有時我們在設置元素的高度百分比時，會發現元素會隨著頁面滾動而滾動，而不是像我們預計的那樣停留在固定位置。 實際上，這是因為CSS中的高度百分比是相對于父元素的高度來計算的。如果父元素的高度不是固定的，那么子元素的高度也會發生變化。 比如，如果我們有一個父元素是body的div元素，我們設置它的高度為100%，那么這個div元素的高度就會等于整個頁面的高度。而如果我們在頁面中滾動，那么div元素的高度也會相應地發生變化。 那么，如果我們想要一個元素的高度百分比不隨著頁面滾動而滾動，該怎么辦呢？ 一個簡單的解決方法是將父元素的高度設置為固定值，比如說我們可以將父元素的高度設置為500px。這樣子元素的高度百分比就會相對于固定的父元素高度來計算，而不會隨著頁面滾動而變化。 下面是一個例子，我們將一個div元素的高度設置為50%，并將它的父元素的高度設置為500px。

<style>
#parent {
height: 500px;
}
#child {
height: 50%;
}
</style>
<div id="parent">
<div id="child">
<p>這里是子元素的內容。</p>
</div>
</div>

這樣，無論我們如何滾動頁面，子元素的高度都會保持在父元素的50%。當然，這個方法也有一定的局限性，因為對于某些頁面布局，我們可能無法將父元素的高度設置為固定值。 總的來說，CSS高度百分比不滾動的問題并不是很難解決。只要我們知道它的原因，并采用一些簡單的技巧，就可以輕松解決這個問題。