CSS 使一个CSS页脚要么位于浏览器窗口底部，要么位于内容底部

在本文中，我们将介绍如何使用CSS使一个页脚要么位于浏览器窗口底部，要么位于内容底部的技巧和方法。

阅读更多：CSS 教程

1. 使用position属性和bottom值

通过使用CSS的position属性和bottom值，我们可以轻松地将页脚定位在浏览器窗口底部。下面是一个简单的示例：

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

在上面的示例中，我们给页脚添加了一个类名为.footer，并将其定位为fixed，即固定在浏览器窗口底部。同时，我们使用了bottom: 0来确保页脚位于浏览器窗口的底部。我们还设置了页脚的宽度为100%，背景颜色为#f1f1f1，内边距为20像素，并通过text-align: center将页脚内容居中显示。

这样，无论页面的内容多少，页脚都将始终位于浏览器窗口的底部。

2. 使用Flexbox布局

另一种常用的方法是使用Flexbox布局。Flexbox布局提供了一种灵活的方式来定位元素。以下是一个使用Flexbox布局将页脚置于内容底部的示例：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

在上面的示例中，我们首先将body元素的display属性设置为flex，以创建一个基于Flexbox的布局。然后，我们使用flex-direction: column将布局方向设置为垂直方向。

接下来，我们将内容容器的flex属性设置为1，以使内容占据剩余的空间。最后，我们为页脚添加相应的样式，包括背景颜色、内边距和文本居中。

这样，无论内容的高度如何，页脚都将始终位于内容底部。

3. 使用Grid布局

除了Flexbox布局外，我们还可以使用CSS的Grid布局来实现相同的效果。以下是一个使用Grid布局将页脚置于内容底部的示例：

body {
  display: grid;
  grid-template-rows: minmax(100vh, auto) min-content;
}

.content {
  grid-row: 1 / -1;
}

.footer {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

在上面的示例中，我们将body元素的display属性设置为grid，以创建一个基于Grid布局的容器。然后，我们使用grid-template-rows: minmax(100vh, auto) min-content设置网格的行。第一行的高度通过minmax(100vh, auto)设置为占据剩余空间。

接下来，我们将内容容器的网格行设置为1 / -1，以使其占据多行。最后，我们为页脚添加相应的样式，包括背景颜色、内边距和文本居中。

这样，无论内容的高度如何，页脚都将始终位于内容底部。