Html 引导4粘性页脚不粘
不太清楚为什么粘性页脚在Bootstrap4中不起作用。我有一个TYPO3网站，我是初学者 粘性页脚没有粘在页面底部 这是一个页面源的副本 我基本上是从bootstraps docs文件夹复制html文件，然后修改它并将其复制到我的TYPO3模板中 如果我用内容填充页面，页脚不会粘住-我必须向下滚动页面才能看到它Html 引导4粘性页脚不粘,html,css,typo3,bootstrap-4,sticky-footer,Html,Css,Typo3,Bootstrap 4,Sticky Footer,不太清楚为什么粘性页脚在Bootstrap4中不起作用。我有一个TYPO3网站，我是初学者 粘性页脚没有粘在页面底部 这是一个页面源的副本 我基本上是从bootstraps docs文件夹复制html文件，然后修改它并将其复制到我的TYPO3模板中 如果我用内容填充页面，页脚不会粘住-我必须向下滚动页面才能看到它 登录页 粘脚 将一个固定高度的页脚固定到页面底部 使用此自定义HTML和CSS的桌面浏览器中的视口 如果需要也可以使用。 第1页，共3页 第1页，共3页 第1页，共3页 在此处
登录页
粘脚
将一个固定高度的页脚固定到页面底部
使用此自定义HTML和CSS的桌面浏览器中的视口
如果需要也可以使用。
第1页，共3页
第1页，共3页
第1页，共3页
在此处放置粘性页脚内容。
设法解决了这个问题。也许我对什么是“粘性”或什么有误解，但解决方案是在css文件中更改绝对->固定
e、 g.来自：
.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;
}
致：
中的示例具有以下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;
}
您可能忘了设置html{position:relative；min height:100%；}
-我知道我通常会忘记这一部分。更新2020-Bootstrap 4.5+
现在Bootstrap 4是flexbox，使用flexbox制作粘性页脚就更容易了
<div class="d-flex flex-column min-vh-100">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
（4.0.0）
（4.5.0）
注意：flex fill
实用程序已发布。因此，在该版本发布之后，就不再需要flex-fill的额外CSS了。此外，min-vh-100
包含在更新的Bootstrap 4版本中
另请参见：在引导程序4中，使用类粘贴页脚。无需定制CSS：
<footer class="footer fixed-bottom">
...
</footer>
...
.
.
这应该可以解决问题。它类似于answer，但已准备好引导类。
使用Bootstrap 4.3.1测试
<footer class="footer fixed-bottom">
...
</footer>
到CSS
为避免阻止页面底部的某些内容，请检查CSS文件路径…@sajee文件路径是否正确。我已经通过查看源代码->然后单击每一个来验证它是否加载了文本，它们是否加载了文本。当我检查您提供的conde代码段时，没有任何样式应用于HTML内容。在Bootstrap 4.1.3Thanks@Daryn smart solution中使用滚动内容时，是正确的！这不是一个粘性页脚（当内容少于一页时固定在底部，否则向下推内容直到用户滚动到底部）；这是一个固定的底部页脚（在内容上始终可见，在滚动期间固定在浏览器底部），这不好，如果页面足够短，使用“固定底部”，页脚将覆盖所有其他元素…这对我来说很好。为了解决@GianlucaGhettini提出的问题，我只添加了背景和底部填充（与使用固定导航栏时需要设置顶部填充相同）。这不是一个粘性页脚（当内容小于一页时固定到底部，否则向下推过去的内容，直到用户滚动到底部）；这是一个固定的底部页脚（在内容上始终可见，滚动时固定在浏览器底部），这是这些答案中唯一正确的粘性页脚（当内容少于一页时固定在底部，否则向下推内容直到用户滚动到底部）；其他的是固定的底部页脚（在内容上始终可见，在滚动期间固定在浏览器底部）。您可以使用min-vh-100
类而不是sticky footer wrapper
谢谢，这是问题的最佳答案：但是确实需要sticky footer wrapper类吗？柔性填充已经填充了将页脚推向底部的空间。非常感谢，您的回答为我节省了很多工作。只要稍加调整，它就会像魔术一样工作。似乎是使用纯bootstrapI的唯一有效答案。我认为body标签也需要class=“h-100”
如果仔细查看，这是在源代码中，我只是设法错过了它。谢谢。这应该是正确的答案，因为它解决了Bootstrap 4.0中没有提到html
CSS要求的问题。请检查此处的解释：）这不是一个好的解决方案，因为为了使其起作用，您必须覆盖正文边距：0；设置为重新启动。老实说，这是对我来说最简单也是唯一有效的答案。有没有一种方法可以自动计算页脚的padding-bottom
值？@Kaszanas这是一项相当艰巨的工作。您可以参考此解决方案
<html class="h-100">
.
.
</html>
<footer class="footer fixed-bottom">
...
</footer>
html {
padding-bottom: >= footer height;
}