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

1. 使用position屬性
2. 使用Flexbox布局
3. 使用***定位

CSS實(shí)現(xiàn)頁面元素（如div）固定在底部的方法

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要將某些元素固定在頁面的底部，無論用戶如何滾動(dòng)頁面，這些元素始終保持在視口的底部，這可以通過CSS實(shí)現(xiàn)，以下是一些主要方法。

使用position屬性

CSS的position屬性可以幫助我們將元素固定在頁面的底部，我們可以將元素的position屬性設(shè)置為“fixed”，然后指定其底部位置。

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

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為“.footer”的類，并將其應(yīng)用于我們希望固定在底部的div元素，這個(gè)類將元素固定在頁面底部，寬度為100%。

使用Flexbox布局

另一種方法是使用CSS的Flexbox布局，我們可以將父元素的display屬性設(shè)置為“flex”，并使用justify-content屬性將其子元素（即我們希望固定在底部的div）推到底部。

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh; /* 視口高度 */
}
.bottom-div {
  /* 其他樣式 */
}

在這個(gè)例子中，".container"類的元素會(huì)占據(jù)整個(gè)視口高度，并且其子元素（即".bottom-div"）會(huì)被推到容器的底部，這種方法對(duì)于創(chuàng)建復(fù)雜的布局非常有用。

使用***定位

我們還可以使用***定位將元素固定在底部，我們可以將元素的position屬性設(shè)置為“absolute”，然后指定其底部和左部的位置。

.bottom-div {
  position: absolute;
  bottom: 0;
  left: 0;
}

在這個(gè)例子中，".bottom-div"類的元素會(huì)被固定在頁面的左下角，我們可以通過調(diào)整left屬性來改變?cè)卦谒椒较蛏系奈恢?，這種方法適用于需要將元素固定在特定位置的場(chǎng)景。