本文目錄導(dǎo)讀：

1. 使用Flexbox布局
2. 使用CSS Grid布局

CSS技巧與布局：如何巧妙地將div置于頁面底部

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要將某些元素置于頁面的底部，例如版權(quán)信息、導(dǎo)航菜單等，使用CSS可以輕松實現(xiàn)這一目標，本文將介紹幾種常見的方法，幫助你巧妙地將div置于頁面底部。

一、使用相對定位（position:relative）

相對定位允許元素相對于其正常位置進行偏移，你可以使用這種方法將div向下移動***頁面底部，為div設(shè)置高度和位置屬性，然后使用bottom屬性將其固定在底部。

.footer {
  position: relative;
  bottom: 0; /* 將div固定在底部 */
  height: auto; /* 根據(jù)內(nèi)容自動調(diào)整高度 */
}

二、使用固定定位（position:fixed）

固定定位允許元素相對于瀏覽器窗口進行定位，即使頁面滾動也不會影響元素的位置，如果你希望div始終固定在頁面底部，無論用戶如何滾動頁面，可以使用這種方法。

.footer {
  position: fixed;
  bottom: 0; /* 將div固定在頁面底部 */
  width: 100%; /* 使div占據(jù)整個頁面寬度 */
}

使用Flexbox布局

Flexbox是一種靈活的布局方式，可以輕松實現(xiàn)元素的垂直對齊，你可以將包含底部div的容器設(shè)置為flex容器，并使用align-items屬性將其對齊到底部。

.container {
  display: flex; /* 將容器設(shè)置為flex容器 */
  flex-direction: column; /* 設(shè)置主軸方向為垂直方向 */
  align-items: flex-end; /* 將子元素對齊到容器底部 */
}

使用CSS Grid布局

CSS Grid布局是一種強大的二維布局系統(tǒng)，適用于創(chuàng)建復(fù)雜的網(wǎng)頁布局，你可以使用grid布局將div放置在網(wǎng)格的底部區(qū)域。

.grid-container {
  display: grid; /* 創(chuàng)建網(wǎng)格布局 */
  grid-template-columns: auto auto auto; /* 設(shè)置列數(shù) */
  grid-auto-rows: minmax(auto, auto); /* 設(shè)置行高 */
}
.footer {
  grid-column: 1 / span 3; /* 將footer跨越所有列 */
  grid-row: end / end; /* 將footer放置在網(wǎng)格底部 */
}