HTML：使用引导程序添加粘性页脚响应[重复]答案

【问题标题】：HTML: add sticky footer responsive using bootstrap [duplicate]HTML：使用引导程序添加粘性页脚响应[重复]
【发布时间】：2019-02-11 13:49:21
【问题描述】：

我正在尝试添加粘性页脚。我搜索了许多示例并尝试但失败了。这个链接是我试过的例子。 https://css-tricks.com/snippets/css/sticky-footer/

当我将相同的代码粘贴到我的 html 时，页脚不会粘在底部，而是停留在主 div 的中心，或者只是推出主要内容并留在主 div 内，我想知道我的 HTML 是否有问题。

这是 CSS。

*, *:before, *:after {
    box-sizing: inherit;
}

html {
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    line-height: 1.5;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px 20px;
}
.main{
    width: 70%;
 }

这是 HTML。

<body>
  <header>
    </header>

   <div class="main">
    </div>

    <footer>
    </footer>
    </body>

编辑 1：我添加了图片。

灰色框是应该保留在 main 内部的内容，我希望页脚保留在 main div 的末尾。然而，到目前为止，页脚一直显示在浏览器的中间和内容中。

【问题讨论】：

您可以使用 html 为粘性页脚添加一些其他 css 样式：HTML -
Header
Main

Footer
CSS -- header { line-height:20px;背景颜色：红色； } .wrapper，.main，页脚 { 浮动：左；宽度：100%；高度：计算（100% - 40px）；边距顶部：40px；位置：绝对； } .main, footer{ height:calc(100% - 20%);背景颜色：黄色； } 页脚{ 高度：计算（100% - 80%）；背景颜色：蓝色； }

标签： html css bootstrap-4

【解决方案1】：

您可以继续在您的网页中使用此示例作为粘性页脚，这是我的引导程序 Example here 提供的

Bootstrap 提供.fixed-bottom 类，如果您需要在网页中固定页脚，则可以使用该类。代码如下：-

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

【讨论】：

【解决方案2】：

设置bottom: 0;和position: absolute;并删除不必要的代码如下

sticky bootstrap 4 doc(我在F12打开看到)

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="main">
</div>

<footer>
footer
</footer>

【讨论】：

我试过了，但页脚仍然显示在浏览器的中间和主要封面页脚的内容。我会添加更多图片来展示它的外观。
试试position: fixed;（你会删除不必要的代码吗？）
而不要flex正文（我认为是这个原因）
我不想要固定页脚，我想要粘性页脚看起来像这样。 jsfiddle.net/8pkk08ku
所以使用position: sticky; :stackoverflow.com/questions/19501919/…