如何固定網頁底部？

在網頁設計中，固定底部是一個常見的需求，通過CSS，我們可以輕松地實現這一功能，下面是一些方法，幫助你固定網頁底部。

方法一：使用position屬性

CSS的position屬性可以用來固定元素的位置，你可以將底部元素設置為position: fixed，這樣元素就會固定在瀏覽器窗口的底部。

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

方法二：使用sticky屬性

position: sticky也是一個不錯的選擇，它可以將元素固定在某個位置，直到另一個元素出現并占據更多空間。

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

方法三：使用flex布局

如果你正在使用CSS Flex布局，可以通過設置align-items: flex-end來將底部元素固定在容器底部。

.container {
  display: flex;
  align-items: flex-end;
}

方法四：使用grid布局

在CSS Grid布局中，可以通過設置align-content: flex-end來將底部元素固定在容器底部。

.container {
  display: grid;
  align-content: flex-end;
}