用 Bootstrap 把页脚粘在页面的底部

我有一些网页，没有太多的内容和页脚坐在页面的中间，但我希望它在底部。

我已经把我所有的页面，在一个“持有人”

#holder {
min-height: 100%;
position:relative;
}

然后使用下面的 CSS 作为页脚

ul.footer {
margin-top: 10px;
text-align: center;
}


ul.footer li {
color: #333;
display: inline-block;
}


#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}

页脚的 html

<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
<li>Email:exampleemail@gmail.com</li>
</ul>
</div>
</div>
</div>
</div>

我想保持底部流体。

211793 次浏览
小开

Http://bootstrapfooter.codeplex.com/

这应该能解决你的问题。

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

CSS:

html,body
{
height:100%;
}


#wrap
{
min-height: 100%;
}


#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}


.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
小开
最佳答案

正如在注释中所讨论的，您的代码基于这个解决方案: https://stackoverflow.com/a/8825714/681807

这个解决方案的关键部分之一是将 height: 100%添加到 html, body，这样 #footer元素就有一个基准高度可以工作——这是代码中缺少的:

html,body{
height: 100%
}

您还会发现，您将遇到与使用 bottom: -50px的问题，因为这将推动您的内容下的折叠时，没有太多的内容。您必须将 margin-bottom: 50px添加到 #footer之前的最后一个元素。

小开

只需将固定底部的类导航栏添加到页脚。

<div class="footer navbar-fixed-bottom">

引导程序4-的更新

正如 Sara Tibbetts 提到的-类是固定的底部

<div class="footer fixed-bottom">
小开

下面是一个使用 css3的例子:

CSS:

html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px);     /* Chrome */
min-height: -moz-calc(100% - 100px);     /* Firefox */
min-height: calc(100% - 100px);     /* native */
}
.footer {
position: relative;
clear:both;
}

HTML:

<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>

小提琴

小开

使用引导类对你有利。 navbar-static-bottom把它放在底部。

<div class="navbar-static-bottom" id="footer"></div>
小开

上面提到的大部分解决方案对我来说都不起作用，但是下面给出的解决方案还是很好的:

<div class="fixed-bottom">...</div>

来源

小开

它可以很容易地实现与 CSS Flex。 具有如下 HTML 标记:

<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>

应使用下列 CSS:

html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}

这是可以玩的 CodePen: https://codepen.io/webdevchars/pen/GPBqWZ

小开

我已经找到了一个简单的解决办法。 对于主体标签添加 <body class="d-flex flex-column min-vh-100">. 在页脚标记上添加类

MT-Auto

整个代码如下所示

<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>

这是工作的引导程序4 + 和测试直到5测试版1


提交答案