极客观点
项目管理
HarmonyOS
不太确定为什么粘性页脚在 Bootstrap 4 中不起作用。我有一个 TYPO3 网站，我是初学者。
粘性页脚没有粘在页面底部。
这是已呈现的页面源代码的副本。
我基本上是从 bootstraps 文档文件夹中复制 html 文件，然后修改它并将其复制到我的 TYPO3 模板中。
如果我用内容填充页面，页脚不会粘住 - 我必须向下滚动页面才能看到它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky footer with a
fixed navbar</a> if need be, too.
</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
原文由 Daryn 发布，翻译遵循 CC BY-SA 4.0 许可协议
2020 年更新 - Bootstrap 4.5+
现在 Bootstrap 4 是 flexbox ，将 flexbox 用于粘性页脚更容易。
Bootstrap 4.0 粘性页脚(4.0.0)
底部示例的简单页脚(4.5.0)
注意：
flex-fill实用程序 包含在后续版本的 Bootstrap 4.1 中。因此，在发布之后，将不再需要用于 flex-fill 的额外 CSS。此外min-vh-100包含在较新的 Bootstrap 4 版本中。另请参阅： Bootstrap 4 - 粘性页脚 - 动态页脚高度