引导3齐平页脚到底部。不固定
我正在为一个我正在设计的网站使用Bootstrap 3。
我想有一个像这个样本的页脚。样品
请注意，我不希望它被修复，所以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;
}
共有1个答案
这里有一个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>
...
<body>
<!-- Begin page content -->
<div class="container">
</div>
...
<footer class="footer">
</footer>
</body>
</html>
-
问题内容： 我正在为正在设计的网站使用Bootstrap 3。 我想要一个像这样的样本页脚。 请注意，我不希望它已修复，因此引导程序navbar-fixed-bottom无法解决我的问题。我只是希望它始终位于内容的底部并且也要有所响应。 任何指南将不胜感激。 编辑： 对不起，如果我不清楚。现在发生的是，内容主体没有足够的内容时。我的页脚向上移动，然后在底部留下一个空白区域。 这就是我现在所拥有的导
-
我知道这个问题可能被问了几百次，但遗憾的是，我在这里找到的答案并没有真正帮助我。 例如，我尝试了以下答案： 引导页脚不在底部 但是我仍然有一个问题，当我的页面内容“小”并且没有填满正文/页面容器的整个高度时，页脚只是漂浮在浏览器窗口末端的某个地方。 以下是我的页脚代码： 我正在使用Bootstrap 4.1和Chrome，我的网站上还有一个代码笔： https://codepen.io/anon/
-
这是我的HTML： 这是我的CSS，仅用于页脚：
-
这是我的代码，我想我的页脚是静态的在我的html页面底部，我如何修复它？
-
问题内容： 任何人都可以解释如何将页脚div与页面底部对齐。从我所看到的示例中，它们都显示了如何使div保持在底部可见，无论您将页面滚动到何处。虽然我不想要那样。我希望它固定在页面的底部，所以它不会移动。感谢帮助！ 问题答案： 更新 我的原始答案来自很久以前，并且链接已断开；更新它，使其继续有用。 我包括内联的更新解决方案，以及JSFiddle上的工作示例。注意：尽管没有内联那些样式，但我依赖CS