本文目錄導讀：

1. 使用相對定位與***定位
2. 使用Flexbox布局

CSS布局技巧：元素始終位于頁面底部

在網頁設計中，有時我們需要某些元素始終位于頁面底部，無論頁面如何滾動或擴展，這些元素都能保持在視口的底部，這通?？梢酝ㄟ^CSS來實現(xiàn)，本文將介紹如何使用CSS將元素固定在頁面底部。

使用相對定位與***定位

要將元素固定在頁面底部，我們可以結合使用相對定位（relative positioning）和***定位（absolute positioning），為包含元素的父容器設置相對定位，然后為需要固定在底部的元素設置***定位，并將其位置設置為底部。

示例代碼：

HTML:

<div class="container">
  <!-- 頁面內容 -->
  <div class="footer">
    <!-- 底部內容 -->
  </div>
</div>

CSS:

.container {
  position: relative; /* 相對定位 */
  height: 100%; /* 或根據需要設置高度 */
}
.footer {
  position: absolute; /* ***定位 */
  bottom: 0; /* 始終位于底部 */
  width: 100%; /* 寬度占據整個容器 */
}

使用Flexbox布局

另一種方法是使用CSS的Flexbox布局，通過將父容器設置為Flex容器，并設置flex-direction: column，我們可以使用align-self屬性將子元素固定在底部。

示例代碼：

CSS:

.container {
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column; /* 子元素從上到下排列 */
  height: 100%; /* 或根據需要設置高度 */
}
.footer {
  align-self: flex-end; /* 子元素對齊到容器的底部 */
}

這種方法的好處是它可以輕松地在不同屏幕尺寸和設備上保持元素的底部位置，F(xiàn)lexbox布局提供了更多的靈活性，允許你進行復雜的布局調整，不過需要注意的是，這種方法需要瀏覽器支持Flexbox布局。