Bootstrap 粘页脚效果

Bootstrap 是一个开源的前端框架，为开发响应式和移动端友好的网站提供了很好的支持。其中，粘页脚效果是 Bootstrap 中比较常见和广泛使用的一种效果，可以让网页内容相对固定，脚部内容吸附在页面底部，当页面滚动时固定在底部，不随滚动而消失。下面将详细讲解 Bootstrap 粘页脚效果的完整攻略。

原理

HTML 的页面元素的中有两个比较重要的属性值，一个是 offsetHeight 能够获取到元素自身高度加上上下边框的高度值，还有一个是 scrollTop 能够获取到元素滚动条相对顶部边框距离的高度。利用这两个属性值，可以判断页面内容是否过短，从而对 footer 进行定位。

步骤

1.确定页面最小高度：
通过设置 body 的最小高度等于视口高度，可以确保网页内容少时，footer 能够吸附在屏幕最下方。

示例代码：

body {
  min-height: 100vh;
}

2.添加 .wrapper 包裹层：
为了将内容区域与 footer 区域分隔开，需要给内容区域添加一个包裹层，命名为 .wrapper。

示例代码：

<body>
  <!-- 内容区域 -->
  <div class="wrapper">
    ...
  </div>

  <!-- footer 区域 -->
  <footer>
    ...
  </footer>
</body>

3.设置 .wrapper 高度和边距：
为让 .wrapper 占据剩余高度，需要先将 footer 移开，增加 padding-bottom 的值，尽量设置成 footer 的高度，再将 .wrapper 的高度设置为 100% - footer 的高度。

示例代码：

footer {
  position: relative;
  margin-top: -100px;
  /* 设置元素自身高度加上上下边框高度的值 */
  height: 100px;
  /* 设置 padding-bottom 为 100px，尽量设置成 footer 的高度 */
  padding-bottom: 100px;
}

.wrapper {
  /* 高度为 最小高度 + footer 高度 + padding-bottom 的和 */
  min-height: calc(100vh + 100px + 100px);
  /* 设置底部边距为 -footer 的高度 */
  margin-bottom: -100px;
}

4.设置 footer 的位置：
通过在.css 文件中绑定 footer 的类名，设置 footer 的 position 为 absolute，并添加 bottom 和 left 值实现 footer 的吸附定位。

示例代码：

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 设置元素自身高度加上上下边框高度的值 */
  height: 100px;
}

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 粘页脚效果</title>
  <style>
    body {
      min-height: 100vh;
    }

    footer {
      position: relative;
      margin-top: -100px;
      height: 100px;
      padding-bottom: 100px;
    }

    .wrapper {
      min-height: calc(100vh + 100px + 100px);
      margin-bottom: -100px;
    }

    footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
    }
  </style>
</head>
<body>
  <!-- 内容区域 -->
  <div class="wrapper">
    <h1>欢迎来到我的站点</h1>
    <p>网站内容...</p>
  </div>

  <!-- footer 区域 -->
  <footer>
    <p>联系方式...</p>
  </footer>
</body>
</html>

示例说明：

以上代码中，使用了.min-height、padding-bottom 和 margin-bottom 将 .wrapper 定义为一个占据全部高度的元素，同时让 footer 具有粘页脚的特性，footer 的吸附定位通过 position: absolute、bottom: 0、left: 0、width: 100% 实现。内容部分和 site-heading、site-content 等可以自由定义。

通过实际应用这个效果，可以达到页面固定布局结构，优化用户浏览体验的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap 粘页脚效果 - Python技术站

原理

步骤

相关文章