CSS 占滿剩余位置是 Web 開發中非常重要的一種技術，特別是在響應式布局中。這種技術可以幫助我們更好地使用空間，避免出現過多留白的情況，讓頁面更加美觀。

/* 使用 CSS 占滿剩余空間 */
.container {
display: flex;
height: 100vh; /* 容器的高度為瀏覽器窗口的高度 */
flex-direction: column; /* 豎直排列 */
}
.header {
flex: 0 0 60px; /* 上部 header 區域的高度為 60px，不可伸縮，不占滿剩余空間 */
}
.content {
flex: 1; /* 中間 content 區域占滿剩余空間，高度自動適應 */
}
.footer {
flex: 0 0 40px; /* 下部 footer 區域的高度為 40px，不可伸縮，不占滿剩余空間 */
}

上面的代碼演示了如何使用 CSS 占滿剩余空間。通過將容器的display設置為flex，可以讓其成為一個彈性容器，支持按比例分配空間。接下來，使用flex-direction指定容器的方向為豎直排列。

在子元素中，使用flex屬性可以根據比例分配剩余空間。比如，設置flex: 1，就可以讓元素占滿剩余空間。

在響應式布局中，這種技術可以幫助我們在不同的屏幕大小下自適應，讓頁面更加靈活和美觀。