我正在使用Bootstrap 3作为我正在设计的网站。
我想要一个像这个样本的页脚。 Sample
请注意，我不希望它固定，因此bootstrap navbar-fixed-bottom无法解决我的问题。我只是希望它始终位于内容的底部，并且能够做出响应。
非常感谢任何指南。
编辑：
很抱歉，如果我不清楚的话。 现在发生的是当内容正文没有足够的内容时。我的页脚向上移动然后在底部留下一个空的空间。
这就是我现在用于导航栏的内容
<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h5 id='footer-header'> SITEMAP </h3>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>News</p>
<p>contact</p>
</div>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>FAQ</p>
<p>Privacy Policy</p>
</div>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxx </h3>
<p>yyyyyyyyyyyyy</p>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxxx </h3>
<p>uuuuuuuuuuuuuuu</p>
</div>
</div>
</div>
</nav>
CSS
.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
答案 0 :(得分：305)
这里有一个来自bootstrap的简化解决方案（你不需要创建一个新类）：http://getbootstrap.com/examples/sticky-footer-navbar/
当您打开该页面时，右键单击浏览器并“查看源代码”并打开sticky-footer-navbar.css文件（http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css）
你可以看到你只需要这个CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
此HTML
<html>
...
<body>
<!-- Begin page content -->
<div class="container">
</div>
...
<footer class="footer">
</footer>
</body>
</html>
答案 1 :(得分：120)
请参阅下面的示例。如果页面内容较少，则会将页脚定位到底部，如果页面包含更多内容，则表现得像普通页脚一样。
<强> CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
<强> HTML
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
UPDATE ：新版本的Bootstrap演示了如何在不添加包装器的情况下添加粘性页脚。有关详细信息，请参阅Jboy Flaga的答案。
答案 2 :(得分：12)
更新：这不完全直接回答问题，但其他人可能会觉得这很有用。
这是响应式页脚的HTML
user.constructor.login对于CSS
<footer class="footer navbar-fixed-bottom">
<div class="container">
</div>
</footer>
注意：在发布此问题时，上面的代码行不会将页脚推到页面内容下方;但是当页面上的内容很少时，它会阻止页脚在页面中间爬行。有关将页脚推到页面内容下方的示例，请查看此处http://getbootstrap.com/examples/sticky-footer/
答案 3 :(得分：10)
使用flexbox，因为您可以随意使用它。 bootstrap 4提供的解决方案仍然在响应式布局中搜索重叠内容，例如：它会在移动视图中中断，我遇到的最巧妙的技巧是使用此处显示的flexbox解决方案演示：（https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/）这样我们不必处理固定高度问题，这是一个过时的解决方案...此解决方案适用于bootstrap 3和4，无论你使用哪个。
format xx答案 4 :(得分：7)
对于仍然挣扎的人来说，解决方案并不像你想要的那样有效，这是我找到的最简单的解决方案。
包装您的主要内容并为其指定最小视图高度。 将60调整为您的风格所需的任何值。
<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>
多数民众赞成，它运作良好。
答案 5 :(得分：5)
Galen Gidman发布了一个非常好的解决方案，解决了没有固定高度的响应式粘性页脚问题。您可以在他的博客上找到他的完整解决方案：http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
<强> HTML
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
<强> CSS
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded { height: 100%; }
答案 6 :(得分：3)
此方法使用最少的标记。只需将所有内容放在.wrapper中，其填充底部和负边距底部等于页脚高度（在我的示例中为100px）。
html, body {
height: 100%;
}
/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */
.wrapper {
min-height: 100%;
height: auto;
margin: 0 auto -100px;
padding-bottom: 100px;
}
.footer {
height: 100px;
}
<body>
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
答案 7 :(得分：2)
对于Bootstrap：
<div class="navbar-fixed-bottom row-fluid">
<div class="navbar-inner">
<div class="container">
Text
</div>
</div>
</div>
答案 8 :(得分：2)
上述解决方案的主要缺陷是页脚的固定高度。
而这并没有在现实世界中削减它，人们使用了大量的设备并且有这种坏习惯，在你最不期望的时候旋转它们并且 ** Poof！ **页脚背后的页面内容！
在现实世界中，您需要一个计算页脚高度的函数，并动态调整页面内容的padding-bottom以适应该高度。
并且您需要在页面load和resize事件以及页脚DOMSubtreeModified上运行此微小功能（以防您的页脚异步动态更新或包含更改大小的动画元素与...互动时。
这是一个概念证明，使用jQuery v3.0.0和Bootstrap v4-alpha，但没有理由说它不适用于每个版本的较低版本。
jQuery(document).ready(function( $ ) {
$.fn.accomodateFooter = function(){
var footerHeight = $('footer').outerHeight();
$(this).css({'padding-bottom':footerHeight+'px'});
}
// accomodate footer after its html has changed
$('footer').on('DOMSubtreeModified', function(){
$('body').accomodateFooter();
})
// accomodate footer on page load and resize
$(window).on('load resize', function(){
$('body').accomodateFooter();
})
$('body').accomodateFooter();
window.addMoreContentToFooter = function() {
var f = $('footer');
f.append($('<p />',{
text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."}))
.append($('<hr />'));
}
});body {
min-height: 100vh;
position: relative;
padding-top: 54px;
}
footer {
background-color: rgba(0,0,0,.65);
color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
display: block;
}
footer hr {
border-top: 1px solid rgba(0,0,0,.42);
border-bottom: 1px solid rgba(255,255,255,.21);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Feed that footer - not a game (yet!)</h1>
<p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
</div>
</div>
<footer>I am a footer with dynamic content.
<hr />
最初，我已发布此解决方案here，但我意识到如果根据此问题发布，可能会对更多人有所帮助。
注意：我故意将$([selector]).accomodateFooter()包装为jQuery插件，因此可以在任何DOM元素上运行，因为在大多数布局中它不是$('body')需要调整的bottom-padding，但是position:relative的某个页面包装元素（通常是footer的直接父级）。
答案 9 :(得分：2)
或者这个
<footer class="navbar navbar-default navbar-fixed-bottom">
<p class="text-muted" align="center">This is a footer</p>
</footer>
答案 10 :(得分：1)
这些解决方案都不能完全适合我，因为我在页脚中使用了navbar-inverse类。但我确实得到了一个有效且无Javascript的解决方案。使用Chrome来帮助形成媒体查询。当屏幕调整大小时，页脚的高度会发生变化，因此您必须注意这一点并进行相应调整。你的页脚内容（我设置id =“footer”来定义我的内容）应该使用postion = absolute和bottom = 0来保持它的底部。宽度：100％。这是我的媒体查询CSS。您必须调整min-width和max-width并添加或删除一些元素：
#footer {
position: absolute;
color: #ffffff;
width: 100%;
bottom: 0;
}
@media only screen and (min-width:1px) and (max-width: 407px) {
body {
margin-bottom: 275px;
}
#footer {
height: 270px;
}
}
@media only screen and (min-width:408px) and (max-width: 768px) {
body {
margin-bottom: 245px;
}
#footer {
height: 240px;
}
}
@media only screen and (min-width:769px) {
body {
margin-bottom: 125px;
}
#footer {
height: 120px;
}
}
答案 11 :(得分：1)
这是使用Flexbox对我有用的东西：
.body-class {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.body-content {
flex: 1 0 auto;
width: 100%;
}
.footer {
width: 100%;
height: 60px;
background-color: #f5f5f5;
flex: none;
}
来源：https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
答案 12 :(得分：0)
使用任何类并使其高度固定。它解决了我的问题。
<div class="container"></div>
<footer></footer>
CSS：
.container{
min-height: 60vh;
}