HTML：使用引导程序添加粘性页脚响应[重复]
Posted
技术标签:
【中文标题】HTML：使用引导程序添加粘性页脚响应[重复]【英文标题】：HTML: add sticky footer responsive using bootstrap [duplicate] 【发布时间】：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 -您可以继续在您的网页中使用此示例作为粘性页脚，这是我的引导程序 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; :***.com/questions/19501919/…以上是关于HTML：使用引导程序添加粘性页脚响应[重复]的主要内容，如果未能解决你的问题，请参考以下文章