我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
使用Bootstrap 5保持页脚在底部
<div class="min-vh-100 d-flex flex-column
justify-content-between">
<div> <!-- Wrapper (Without footer) -->
<header>
I am a header.
</header>
<article>
I am an article!
</article>
</div> <!-- End: Wrapper (Without footer) -->
<footer>
I am a footer.
</footer>
</div>
在CodePen中的现场演示
Note
请确保您使用以下引导类将所有内容包装在<div>或任何其他块级元素中:min-vh-100, d-flex,flex-column,justify-content-between。 确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。 确保您使用<footer>或任何其他块级元素来包装页脚。
代码的解释
Min-vh-100确保body元素至少延伸到屏幕的全部高度 Flex-column在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。 Justify-content-between将页脚推到屏幕底部。
看看如何做同样的(保持页脚在底部)与CSS -链接
其他回答
要处理宽度限制布局，请使用以下方法，这样您就不会得到圆角，并且您的导航条将与应用程序的两侧齐平
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="width-constraint clearfix">
<p class="pull-left muted credit">YourApp v1.0.0</p>
<p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
</div>
</div>
</div>
然后可以使用CSS重写引导类来调整高度、字体和颜色
.navbar-fixed-bottom {
font-size: 12px;
line-height: 18px;
}
.navbar-fixed-bottom .navbar-inner {
min-height: 22px;
}
.navbar-fixed-bottom .p {
margin: 2px 0 2px;
}
使用Bootstrap 4中内置的flex实用程序! 以下是我使用Bootstrap 4工具得到的结果。
<div class="d-flex flex-column" style="min-height: 100vh;">
<header></header>
<div class="container flex-grow-1">
<div>Some Content</div>
</div>
<footer></footer>
</div>
.d-flex使主div成为一个伸缩容器 .flex-column在主div来安排你的flex项目在一个列 min-height: 100vh到主div，可以使用style属性，也可以在CSS中，垂直填充视口 元素上的.flex-grow-1，让主内容容器占用视口高度中剩余的所有空间。
保持简单。
footer {
bottom: 0;
position: absolute;
}
您可能还需要通过向正文添加等同于页脚高度的margin-bottom来抵消页脚的高度。
这是用Twitter Bootstrap和新的navbar-fixed-bottom类的正确方法:(你不知道我花了多长时间寻找这个)
CSS:
html {
position: relative;
min-height: 100%;
}
#content {
padding-bottom: 50px;
}
#footer .navbar{
position: absolute;
}
HTML:
<html>
<body>
<div id="content">...</div>
<div id="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
下面是使用Flexbox的最新版本Bootstrap(在撰写本文时为4.3)的解决方案。
HTML:
<div class="wrapper">
<div class="content">
<p>Content goes here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex-grow: 1;
}
一个代码依赖的例子:https://codepen.io/tillytoby/pen/QPdomR
