粘性页脚Bootstrap 4不在底部

粘性页脚是一种页面布局技术，它可以让网页的页脚固定在页面的底部，无论内容的高度如何变化，都能保持在视图的底部位置。这种布局可以提升用户体验，使得网页更加美观和易用。

在前端开发中，使用Bootstrap 4框架可以实现粘性页脚。Bootstrap 4是一个流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，可以快速构建响应式的网页。

要实现粘性页脚，可以按照以下步骤操作：

创建HTML文件，并引入Bootstrap 4的CSS和JavaScript文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>粘性页脚</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<!-- 页面内容 -->

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在页面中添加一个<footer>元素，作为页脚内容，设置相应的样式：

<footer class="footer bg-light">
  <div class="container">
    <span class="text-muted">这是一个粘性页脚。</span>
  </div>
</footer>

在上述代码中，<footer>元素使用了footer和bg-light类，可以自定义样式。

在CSS中添加以下样式，使页脚固定在底部：

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

在上述样式中，html元素和body元素的min-height属性设置为100%，确保页面的高度充满整个视窗。body元素的margin-bottom属性设置为页脚的高度，以免内容被页脚遮挡。footer元素使用position: absolute和bottom: 0将其固定在底部，width: 100%设置为占满整个页面宽度，height: 60px设置为合适的高度。

通过以上步骤，就可以实现一个使用Bootstrap 4的粘性页脚效果。

对于腾讯云相关产品，推荐使用腾讯云的静态网站托管服务（COS）来托管和部署网页。腾讯云静态网站托管（COS）是一种低成本、高可靠的静态网页托管服务，适用于个人网站、企业官网、电子商务网站等各种类型的网站。您可以在腾讯云官网上了解更多关于腾讯云静态网站托管服务的信息：腾讯云静态网站托管（COS）。