HTML 在Bootstrap中创建固定底部

在本文中，我们将介绍如何使用HTML和Bootstrap创建一个固定底部。固定底部是指在网页中始终保持在底部位置的元素，无论用户如何滚动页面。

阅读更多：HTML 教程

HTML结构

首先，我们需要创建HTML结构来包含固定底部的内容。我们可以使用下面的HTML代码作为示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Footer Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="d-flex flex-column min-vh-100">
  <header>
    <!-- 网页头部内容 -->
  </header>

  <main class="flex-grow-1">
    <!-- 网页主要内容 -->
  </main>

  <footer class="footer mt-auto py-3 bg-light">
    <div class="container text-center">
      <span class="text-muted">© 2021 备注信息. All rights reserved.</span>
    </div>
  </footer>
</body>
</html>

在上面的代码中，我们使用了Bootstrap提供的”min-vh-100″类来确保主要内容在视口内，即使内容不够长。

CSS样式

为了让固定底部的元素正确显示，我们需要添加一些CSS样式。我们可以使用下面的CSS代码作为示例：

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

.main {
  flex-grow: 1;
}

.footer {
  margin-top: auto;
  padding: 15px;
  background-color: lightgray;
}

在上面的代码中，我们使用了”flex-direction: column;”来将页面布局设置为垂直方向。同时，我们使用了”margin-top: auto;”来将底部元素推动到页面的底部。

示例

下面是一个演示使用HTML和Bootstrap创建固定底部的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Footer Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .main {
      flex-grow: 1;
    }

    .footer {
      margin-top: auto;
      padding: 15px;
      background-color: lightgray;
    }
  </style>
</head>
<body class="d-flex flex-column min-vh-100">
  <header>
    <h1>网页标题</h1>
  </header>

  <main class="flex-grow-1">
    <h2>主要内容</h2>
    <p>这里是网页的主要内容。</p>
  </main>

  <footer class="footer mt-auto py-3 bg-light">
    <div class="container text-center">
      <span class="text-muted">© 2021 备注信息. All rights reserved.</span>
    </div>
  </footer>
</body>
</html>