CSS<div>可以通過一些技巧放置在頁面最底部，讓它隨著頁面的滾動而保持在底部位置。下面介紹幾種實現方式。

使用絕對定位

使用 CSS 的position: absolute和bottom: 0可以將<div>置于頁面最底部，其中position: absolute表示將元素從文檔流中脫離，并在頁面中的指定位置進行定位。

.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}

其中width: 100%表示該元素寬度對頁面的寬度進行占滿，height: 100px表示該元素高度為 100 像素。

使用 Flex 布局

使用 CSS 的 Flex 布局可以讓<div>置于頁面最底部，同時保證頁面結構的清晰和可讀性。

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1;
}
.footer {
flex-shrink: 0; 
}

其中，flex-direction: column屬性表示讓.container按照垂直方向進行布局，min-height: 100vh表示將高度設置為屏幕高度的 100%，flex: 1表示讓.main元素占據剩余空間，flex-shrink: 0表示.footer元素不進行收縮。

使用 Grid 布局

使用 CSS 的 Grid?布局也可以實現將<div>置于頁面最底部，其代碼如下所示：

.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.main {
grid-row: 1;
}
.footer {
grid-row: 2;
}

其中，grid-template-rows: 1fr auto表示將.container垂直方向分為兩個區域，第一個區域占據剩余的空間，第二個區域根據上下文自適應高度，min-height: 100vh表示設置高度為屏幕高度的 100%。

通過以上三種實現方式，可以讓<div>置于頁面最底部，實現各種需求的頁面設計。