在 CSS 中，
<div>元素非常常用，它通常被用來表示網頁上的一塊獨立區域。如何使得一個
<div>對齊在頁面的底部呢？接下來，我們將介紹三種實現方法。
1.使用絕對定位。
div {
position: absolute;
bottom: 0;
}這種方法會使得
<div>元素定位在離頁面底部最近的非 static 定位的祖先元素的距離為 0 的位置上。
2.使用 Flexbox。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}在這種方法中，我們使用了 Flexbox 布局。我們將
<body>的顯示方式設置為
flex，并將其垂直方向布局方式設置為
column。然后，給
<main>元素設置
flex: 1，它就會自動擴展并填滿整個屏幕，
<div>元素就會自然地定位在頁面的底部。
3.使用 Grid。
body {
display: grid;
grid-template-rows: 1fr auto;
}
main {
grid-row: 1;
overflow: auto;
}在這種方法中，我們使用了 Grid 布局。我們將
<body>的顯示方式設置為
grid，并將其垂直方向的布局設置為兩個行，其中一行占整個頁面的剩余空間，另一行則自適應其內部的內容高度。然后，我們將
<main>元素放在第一個行，也就是頁面的剩余空間中。最后，我們將
<main>元素設為滾動，以使得它的內容高度超過
<div>元素時，可以滾動并不會影響頁面的布局。
以上就是三種實現方法了，你可以根據自己的需求選擇其中的一種實現即可。
上一篇css div省略號
下一篇css div網頁模塊