如何使用CSS在布局上紧贴底部？

要在布局上紧贴底部，可以使用CSS的flexbox或grid布局来实现。以下是使用flexbox和grid布局的方法：

使用flexbox布局：

1. 创建一个父容器，并将其设置为flex布局：display: flex;
2. 将父容器的高度设置为100vh，以确保它占据整个视口高度：height: 100vh;
3. 将父容器的flex方向设置为column，使子元素垂直排列：flex-direction: column;
4. 将子元素的flex属性设置为1，以使它们平均分配剩余空间：flex: 1;
5. 将子元素的margin-top属性设置为auto，以将它们推到底部：margin-top: auto;

示例代码：

.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
  margin-top: auto;
}

使用grid布局：

1. 创建一个父容器，并将其设置为grid布局：display: grid;
2. 将父容器的高度设置为100vh，以确保它占据整个视口高度：height: 100vh;
3. 将父容器的grid-template-rows属性设置为auto 1fr，以创建两个行，第一行高度自适应内容，第二行占据剩余空间：grid-template-rows: auto 1fr;
4. 将子元素的grid-row属性设置为2，使其位于第二行：grid-row: 2;

示例代码：

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr;
}

.content {
  grid-row: 2;
}

这些方法可以帮助您在布局上紧贴底部。根据具体的需求和场景，您可以选择适合您的方法来实现。