css实现div底部对齐

在CSS中，要让一个`div`元素在页面底部对齐，通常有两种常见的方法：

1. **Flex布局**:
如果容器使用的是弹性盒模型（flexbox），可以设置`display: flex;`，然后给容器加上`align-items: flex-end;`属性。这会使子元素（如`div`）在垂直方向上从顶部开始，并在最后一行结束。

   .container {
     display: flex;
     align-items: flex-end;
   }
   
   .bottom-align-div {
     /* 其他样式 */
   }

2. **Grid布局**:
使用CSS Grid布局时，可以将`div`放在最后一行，通过设置`grid-template-rows`属性使其占据剩余的空间。例如：

   .container {
     display: grid;
     place-items: flex-end;
   }

   .bottom-align-div {
     /* 其他样式 */
   }

3. **绝对定位（Positioning with `position: absolute`）**:
给父元素设置`position: relative;`，并给`div`设置`position: absolute; bottom: 0;`，使其位于其最近的已定位祖先元素的底部。

   .parent {
     position: relative;
   }
   
   .bottom-align-div {
     position: absolute;
     bottom: 0;
   }