用 CSS 固定 Div 在底部

在 Web 开发中，有时我们需要将 div 元素固定在窗口的底部，无论窗口大小或页面内容的长度如何。本文将探讨利用 CSS 实现这一目标的方法。

用 CSS 固定 Div 在底部

方法 1：使用定位

```css my-div { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } ```

`position: absolute;` 将 div 元素从正常文档流中移除，以便我们可以对其进行绝对定位。 `bottom: 0;` 将 div 元素的底部边缘固定在浏览器窗口的底部。 `left: 50%;` 将 div 元素水平居中。 `transform: translate(-50%, 0);` 将 div 元素向后移动其自身宽度的 50%，以使其水平居中。

方法 2：使用 flexbox

```css container { display: flex; flex-direction: column; }

my-div { flex: 1 0 auto; } ```

创建一个 flexbox 容器（`container`）。 将 flexbox 方向设置为列，以便元素在垂直方向上排列（`flex-direction: column;`）。 将 div 元素（`my-div`）设置为 flex 项目。 `flex: 1 0 auto;` 意味着 div 元素将占据所有剩余空间，从而将其固定在底部。

垂直居中

如果还需要垂直居中 div 元素，可以使用以下 CSS：

```css container { display: flex; flex-direction: column; justify-content: center; } ```

`justify-content: center;` 将 flexbox 容器中的项目垂直居中。

其他考虑因素

确保父元素的高度已明确定义，以便 div 元素能够固定在底部。 如果 div 元素包含可滚动的内容，请考虑使用 `overflow: auto;` 来启用滚动。 对于非文本内容，如图像，可以使用 `background-size: contain;` 或 `background-size: cover;` 来调整其大小并将其固定在 div 元素中。