我知道这个问题可能被问了数百遍，但可惜的是，我在这里找不到的答案确实对我有帮助。
我尝试了以下答案：
但是我仍然有一个问题，当页面内容“变小”并且没有填充主体/页面容器的整个高度时，页脚仅会浮动在浏览器窗口末尾的某个位置。
这是我的页脚的代码：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
</div>
</footer>我使用的是Bootstrap 4.1和Chrome，这也是我网站的代码库：
https://codepen.io/anon/pen/oMZVxq
注意：您必须使用Codepen中的侧边栏视图才能实际看到页脚不在底部，因为Codepen中的视图尺寸太小以至于看起来正确。