CSS 如何在页面底部定位

footer>标签，不使用包装器

在本文中，我们将介绍如何使用 CSS 和 HTML5，在不使用包装器的情况下将

footer>标签定位在页面底部。

阅读更多：CSS 教程

CSS 选择器

在开始之前，我们先了解一下 CSS 选择器。选择器用于选择 HTML 文档中的特定元素，并应用样式。在本文中，我们将使用以下 CSS 选择器：

标签选择器：选择指定标签类型的元素；
类选择器：选择具有相同 class 属性值的元素；
ID选择器：选择具有相同 id 属性值的元素；

footer> 标签的基本样式设置

首先，我们需要为页面中的

footer>标签设置一些基本的样式。在 CSS 中，我们可以使用标签选择器来选择这个元素，并应用一些基本样式。

footer {
  background-color: #f9f9f9;
  padding: 20px;
  text-align: center;
  color: #333;
}

在上面的代码中，我们为

footer>标签设置了一个浅灰色的背景色，内部有20像素的内边距（上、下、左、右），居中对齐文本，并使用深灰色的文字颜色。

使用绝对定位将

footer>置于页面底部

为了将

footer>标签置于页面的底部，我们可以使用绝对定位。绝对定位是相对于其最近的已定位的祖先元素进行定位的。在本例中，我们将将整个页面视为已定位的祖先元素，通过将

footer>元素的位置设置为底部来实现所需的效果。

首先，让我们为整个页面的内容创建一个包含块：

body {
  position: relative;
}

接下来，我们可以使用以下样式来定位

footer>标签：

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

在上面的代码中，我们将

footer>标签的位置设置为左下角（left: 0; bottom: 0;），并将宽度设置为100%，以使其占据整个页面的宽度。

避免页面内容与

footer>重叠

使用上述方法将

footer>标签置于页面底部时，可能会出现一个问题，即页面内容可能会与

footer>标签重叠。为了避免这种情况，我们可以使用额外的 CSS 样式。

body {
  margin-bottom: 75px;
}
footer {
  height: 75px;
}

在上面的代码中，我们通过为元素设置底部外边距（margin-bottom: 75px;）和为

footer>标签设置高度（height: 75px;），来避免页面内容与

footer>标签重叠。

完整的代码示例

下面是一个完整的代码示例，展示了如何使用 CSS 和 HTML5 将

footer>标签定位在页面底部，而无需使用包装器。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      position: relative;
      margin-bottom: 75px;
    }
    footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 75px;
      background-color: #f9f9f9;
      padding: 20px;
      text-align: center;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>页面内容</h1>
  <p>这里是页面内容的示例。</p>
  <!-- 其他页面元素 -->

  <footer>
    这里是页脚的示例内容。
  </footer>
</body>
</html>

上述代码中，我们将 CSS 样式定义放置在标签中，并在标签中添加了一些内容来模拟页面的实际内容。通过将

footer>标签放置在标签的最后，它将出现在页面底部。