本文目錄導讀：

1. 使用position屬性
2. 使用flex布局

CSS實現(xiàn)頁面元素固定在底部的方法

在網(wǎng)頁設計中，我們經(jīng)常需要將某些元素固定在頁面的底部，以便用戶無論滾動到哪里都能快速訪問，這通?？梢酝ㄟ^CSS來實現(xiàn)，本文將介紹幾種常用的方法，幫助您輕松實現(xiàn)元素固定在底部的效果。

使用position屬性

CSS中的position屬性可以幫助我們實現(xiàn)元素固定在底部的效果，可以將元素的position屬性設置為fixed，這樣元素就會固定在瀏覽器窗口的指定位置，即使頁面滾動也不會改變位置。

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

使用flex布局

除了使用position屬性，我們還可以利用CSS的flex布局來實現(xiàn)元素固定在底部的效果，通過將父元素的display屬性設置為flex，并設置flex-direction為column，然后利用align-items屬性將子元素對齊到底部。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 視口高度 */
}
.footer {
  align-self: flex-end; /* 對齊到底部 */
}

三. 使用***定位

我們還可以使用***定位（absolute positioning）將元素固定在底部，將元素的position屬性設置為absolute，然后利用top屬性指定距離底部的距離。

.footer {
  position: absolute;
  bottom: 0; /* 距離底部0距離 */
  width: 100%; /* 寬度占滿全屏 */
}

就是幾種常用的將元素固定在底部的方法，在實際應用中，可以根據(jù)具體需求和場景選擇合適的方法，還可以通過調(diào)整其他CSS屬性，如高度、邊距等，進一步優(yōu)化布局效果。