我知道这个问题可能被问了数百遍，但可惜我在这里找不到的答案对我有帮助。
例如，我尝试了以下答案：
但是我仍然遇到一个问题，当页面内容“变小”并且没有填满正文/页面容器的整个高度时，页脚仅会浮动在浏览器窗口末尾的某个位置。
这是我的页脚代码：
<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中的视图尺寸太小以至于看起来正确。
感谢任何帮助！
答案 0 :(得分：4)
您可以使用内置的引导程序类来实现此目的。
您需要的是使容器成为列flex容器。使用的类是：d-flex flex-column
要将容器设置为高度：100％，您可以将类h-100应用于html，body和容器，或添加到容器样式height:100vh;
对于页脚，将使用margin-top:auto，要使用的类为：mt-auto;
下面的示例以全页模式运行
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="/" class="nav-link ">Link1</a>
</li>
<li class="nav-item">
<a href="" class="nav-link ">Link2</a>
</li>
<li class="nav-item">
<a href="" class="nav-link ">Link3</a>
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
<a href="#" class="kf-links">Forgot Password?</a>
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<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>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>
codepen更新了https://codepen.io/anon/pen/PBpgNN
关于Boostrap类https://getbootstrap.com/docs/4.0/utilities/flex/的提示，请参见https://getbootstrap.com/docs/4.0/utilities/sizing/
答案 1 :(得分：2)
如果要固定页脚，只需将fixed-bottom类添加到footer标记中，如下所示。
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
答案 2 :(得分：1)
首先将display: flex;和flex-direction: column;添加到#page-container。
现在，您已经“设置好了舞台”，使页脚与底部对齐。将其margin-top设置为auto（通过添加类mt-auto），就可以完成；
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
请参见 this codepen 。