CSS 中的上中下布局撐滿是指在頁面中將一個父級元素分為三個部分，即上、中、下三個區域，并讓它們都撐滿整個頁面。這種布局方法不僅可以讓頁面看起來更加美觀整潔，而且可以提升用戶交互體驗和閱讀效果。 下面是一個實現上中下布局撐滿的 CSS 代碼示例：

父級元素 {
display: flex;
flex-direction: column;
height: 100vh;
}
#top {
flex: 0 0 80px; /* 上部區域高度為80px */
}
#middle {
flex: 1 1 auto; /* 中部區域盡可能地填充剩余空間 */
}
#bottom {
flex: 0 0 60px; /* 下部區域高度為60px */
}

上面的代碼中，我們使用伸縮盒模型（flexbox）來實現三個區域的布局。首先我們通過設置父級元素為 flex 布局，并將其方向設置為縱向（column），然后通過設置三個子元素（即上、中、下三個區域）的 flex 值來控制它們的大小和位置。 具體來說，上部區域的高度為 80px，中部區域盡可能地填充剩余空間，而下部區域的高度是 60px。這樣就實現了一個撐滿整個頁面的上中下布局。 需要注意的是，因為上下區域的高度是固定的，所以在中部區域要盡可能地填充剩余空間，才能讓整個頁面看起來更加流暢自然。同時，也可以根據實際需求對上下區域的高度進行自定義調整。 總之，上中下布局撐滿是一種非常實用的頁面布局方式，可以讓頁面結構更加清晰，具有更好的視覺效果。如果你需要實現這種布局，可以參考上面的 CSS 代碼示例進行設置。