CSS 是現代網頁設計中不可或缺的組成部分，它可以為網頁增加各種效果，讓頁面更加生動、美觀，提高用戶體驗。

在頁面設計中，有時我們需要實現一個固定的側邊欄，當頁面內容溢出時，需要添加滾動條來幫助用戶瀏覽。下面我們將介紹如何用 CSS 來實現這一效果。

/*HTML 結構*/
<div class="container"><aside class="sidebar"><p>側邊欄內容</p></aside><main class="main"><p>主要內容</p></main></div>/*CSS 樣式*/
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 200px;
background-color: #eee;
overflow-y: auto; /*設置豎直方向滾動條*/
}
.main {
flex-grow: 1; /*主要內容自動填充剩余空間*/
padding: 20px;
}

上面的代碼中，我們使用了 flex 布局，將側邊欄和主要內容放在同一行，并讓主要內容自動填充剩余空間。側邊欄使用了 overflow-y 屬性來添加豎直方向滾動條，當內容溢出時，用戶可以通過滾動條來滾動內容。

通過這種方式，我們可以輕松實現固定側邊欄和滾動條效果，提高網頁的用戶體驗。