CSS 作為前端開發的重要基礎，常常被用來控制頁面布局和樣式。在使用 CSS 進行頁面布局時，我們經常會遇到需要上面不變，下面固定的需求。下面介紹兩種實現方法。

方法一：

.fixed-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

這種方法非常簡單，只需要將底部的元素使用position: fixed;進行定位，再通過bottom: 0;將其固定在頁面底部即可。但這種方法也有一個明顯的缺點，即內容長度不足時，底部元素仍會停留在頁面底部。

方法二：

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex: 1;
}
.fixed-footer {
flex-shrink: 0;
}

這種方法使用 CSS 的 Flexbox 布局，將 body 元素設置為一個垂直方向的彈性容器，通過flex-direction: column;將其內部元素排列成一列。再將主要內容部分的容器設置為彈性子元素，并使用flex: 1;讓其占滿剩余空間，最后將底部元素設置為彈性子元素，使用flex-shrink: 0;避免其在內容不足時縮小。

這種方法的優點是不受內容長度的影響，無論內容是否填滿整個屏幕，底部元素都會保持在頁面底部。