CSS 如何创建一个与Bootstrap 3兼容的粘性页脚

在本文中，我们将介绍如何使用CSS创建一个粘性页脚，并确保它与Bootstrap 3框架兼容。粘性页脚是指无论内容是否充满整个屏幕，页脚都会始终保持在页面底部。这在网页设计中非常有用，可以为网站提供一致的外观，并为用户提供更好的体验。

阅读更多：CSS 教程

什么是粘性页脚？

粘性页脚是指无论内容的高度如何，页脚都保持在页面底部的特性。在某些情况下，网页的内容可能不足以填满整个屏幕，并且页脚会提前出现在页面上方。这种情况下，我们希望页脚仍然保持在页面底部，而不是出现在内容之后。

创建粘性页脚的HTML结构

首先，我们需要一个基本的HTML结构，以创建我们的粘性页脚。我们可以使用Bootstrap 3的网格系统来布局页面的主要内容和页脚。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Sticky Footer with Bootstrap 3</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Page Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, quibusdam.</p>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <p>© 2022 Example Company. All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在这个基本结构中，我们应用了Bootstrap 3的容器和网格系统。页面的主要内容位于容器内的一个列（col-md-12）中。页脚位于一个独立的<footer>元素中，它也在一个容器内的一个列中。这样可以确保页脚始终位于页面底部。

使用CSS创建粘性页脚效果

要创建一个粘性页脚效果，我们需要在CSS中设置相应的样式。我们使用相对定位（position: relative）和负边距（negative margin）来实现这一效果。

html, body {
  height: 100%;
  margin: 0;
}
.container {
  min-height: 100%;
  position: relative;
  margin-bottom: -50px;
}
.footer {
  background-color: #f8f8f8;
  padding: 20px 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

在上面的CSS代码中，我们设置了页面的html和body元素的高度为100%，并去除了默认的边距。接下来，我们为容器设置了最小高度为100%，使用相对定位，并通过负边距将页脚提前到页面底部。

最后，我们为页脚设置了背景颜色、内边距、绝对定位（position: absolute），并指定了它的底部位置（bottom: 0），宽度（width: 100%）和高度（height: 50px）。这样就实现了一个粘性页脚，无论内容如何，它始终保持在页面底部。

示例

让我们通过一个示例来演示粘性页脚是如何工作的。在我们之前的HTML结构和CSS样式的基础上，假设页面的内容不足以填充整个屏幕高度，我们将会看到页脚始终保持在页面底部。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Sticky Footer with Bootstrap 3</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .container {
      min-height: 100%;
      position: relative;
      margin-bottom: -50px;
    }
    .footer {
      background-color: #f8f8f8;
      padding: 20px 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Page Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, quibusdam.</p>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <p>© 2022 Example Company. All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

你可以尝试在浏览器中打开这个示例，并根据需要调整页面内容的高度，观察页脚的变化。