Html Bootstrap 4 粘性页脚不粘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46722697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Sticky Footer Not Sticking
提问by Daryn
Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at.
不太确定为什么粘性页脚在 Bootstrap 4 中不起作用。我有一个 TYPO3 网站，我是初学者。
The sticky footer is not sticking at the bottom of the page.
粘性页脚没有粘在页面底部。
Here is a copy of the page source as it has been rendered.
这是已呈现的页面源的副本。
I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.
我基本上是从 bootstraps docs 文件夹中复制 html 文件，然后对其进行修改并将其复制到我的 TYPO3 模板中。
If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.
如果我用内容填充页面，页脚不会粘住 - 我必须向下滚动页面才能看到它。
<!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>回答by Zim
Update 2019 - Bootstrap 4.3+
2019 年更新 - Bootstrap 4.3+
Now that Bootstrap 4 is flexbox, it's easier to use flexbox for the sticky footer.
现在 Bootstrap 4 是flexbox，对于粘性页脚使用 flexbox 会更容易。
<div class="d-flex flex-column sticky-footer-wrapper">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
body, .sticky-footer-wrapper {
min-height:100vh;
}
.flex-fill {
flex:1 1 auto;
}
Demo: Bootstrap 4 Sticky Footer(4.0.0)
演示：Bootstrap 4 粘性页脚(4.0.0)
Note:The flex-fillutility class will be included in the next Bootstrap 4.1release. So after that release the extra CSS for flex-fill won't be needed.
注：该flex-fill实用程序类将被列入下一个引导程序4.1版本。所以在那之后发布额外的 flex-fill 的 CSS 将不再需要。
Also see: Bootstrap 4 - Sticky footer - Dynamic footer height
回答by Daryn
Managed to figure it out. Maybe I have a misunderstanding on what "Sticky" is or something, but the solution was to change absolute -> fixed in the css file.
设法弄明白了。也许我对“Sticky”是什么或什么有误解，但解决方案是更改绝对 -> 固定在 css 文件中。
e.g. from:
例如来自：
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
to:
到：
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
回答by Benjineer
The example in the Bootstrap 4 docshas the following CSS:
Bootstrap 4 文档中的示例具有以下 CSS：
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
You've probably forgotten to set html { position: relative; min-height: 100%; }- I know I usually forget that part.
你可能忘记了设置html { position: relative; min-height: 100%; }- 我知道我通常会忘记那部分。
回答by shacker
In Bootstrap 4, use the fixed-bottomclass to stick your footer. No custom CSS needed:
在 Bootstrap 4 中，使用固定底部类来粘贴页脚。不需要自定义 CSS：
<footer class="footer fixed-bottom">
...
</footer>
回答by Jigar
<html class="h-100">
.
.
</html>
This should solve the problem. It is similar to Benjineer'sanswer but ready bootstrap class. Tested with Bootstrap 4.3.1
这应该可以解决问题。它类似于Benjieer 的答案，但已准备好引导程序类。使用 Bootstrap 4.3.1 测试
回答by Swaleh Matongwa
if you use
如果你使用
<footer class="footer fixed-bottom">
...
</footer>
remember to add
记得添加
html {
padding-bottom: greater than your footer;
}
to the CSS to avoid blocking some content at the bottom your page
到 CSS 以避免阻止页面底部的某些内容
