刷新页脚到页面底部，twitter引导
我通常熟悉使用css刷新页脚的技巧，以及以下方法 。
但是我在使用这种方式为Twitter引导工作时遇到了一些麻烦，很可能是因为Twitter引导程序本质上是响应式的。 使用Twitter引导程序我无法使用上述博客文章中描述的方法将页脚刷新到页面的底部。
发现这里的片段真的很适合自举
HTML：
<div id="wrap"> <div id="main" class="container clear-top"> <p>Your content here</p> </div> </div> <footer class="footer"></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; }
来源： 演示和教程
Bootstrap 2.2.1现在包含这个function。
使用导航栏组件并添加.navbar-fixed-bottom类：
<div class="navbar navbar-fixed-bottom"></div>
不要忘记添加body { padding-bottom: 70px; } 否则页面内容可能被覆盖。
文档： http ： //getbootstrap.com/components/#navbar-fixed-bottom
Twitter引导程序NOT STICKY FOOTER的一个工作示例
<script> $(document).ready(function() { var docHeight = $(window).height(); var footerHeight = $('#footer').height(); var footerTop = $('#footer').position().top + footerHeight; if (footerTop < docHeight) { $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px'); } }); </script>
你至less需要一个#footer元素
当不需要滚动条，如果内容适合屏幕只是将10的值更改为0滚动条将显示，如果内容不适合屏幕。
以下是如何从官方页面执行此操作：
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
我只是现在就testing它，它工作的很棒！ 🙂
HTML
<body> <!-- Part 1: Wrap all page content here --> <div id="wrap"> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> </div> <div id="push"></div> </div> <div id="footer"> <div class="container"> <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div> </body>
相关的CSS代码是这样的：
/* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by it's height */ margin: 0 auto -30px; } /* Set the fixed height of the footer here */ #push, #footer { height: 30px; } #footer { background-color: #f5f5f5; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } }
对于粘滞页脚，我们使用HTML中的两个DIV's实现基本粘贴页脚效果。 这样写：
HTML
<div class="container"></div> <div class="footer"></div>
CSS
body,html{ height:100%; } .container{ min-height:100%; } .footer{ height:40px; margin-top:-40px; }
更简单的官方示例： http ： //getbootstrap.com/examples/sticky-footer-navbar/
html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #f5f5f5; }
好吧，我发现混合的navbar-inner和navbar-fixed-bottom
<div id="footer"> <div class="navbar navbar-inner navbar-fixed-bottom"> <p class="muted credit"><center>ver 1.0.1</center></p> </div> </div>
这看起来不错，适合我
看小提琴中的例子
你需要包装你的.container-fluid div才能让你的粘性页脚工作，同时你的.wrapper类也缺less一些属性。 尝试这个：
从你的body标记删除padding-top:70px ，并将其包含在.container-fluid ，如下所示：
.wrapper > .container-fluid { padding-top: 70px; }
我们必须这样做，因为向下推动body以容纳导航栏最终将页脚进一步推动（进一步70px）通过视口，所以我们得到一个滚动条。 我们得到更好的结果推动.container-fluid股利。
接下来，我们必须删除.container-fluid div外部的.wrapper类，并用它包装#main div，如下所示：
<div class="wrapper"> <div id="main" class="container-fluid"> <div class="row-fluid">...</div> <div class="push"></div> </div> </div>
你的页脚当然必须在.wrapper div之外，所以把它从`.wrapper div中移出并放在外面，像这样：
<div class="wrapper"> .... </div> <footer class="container-fluid"> .... </footer><!--END .row-fluid-->
在完成之后，通过使用负边距，将页脚正确地推送到.wrapper类，如下所示：
.wrapper { min-height: 100%; height: auto !important; /* ie7 fix */ height: 100%; margin: 0 auto -43px; }
这应该是可行的，尽pipe您可能需要修改其他一些东西，以便在屏幕大小调整时使其工作，例如重置.wrapper类的高度，如下所示：
@media (max-width:480px) { .wrapper { height:auto; } }
这对我完美的工作。
将此类navbar-fixed-bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
我这样使用它：
<div class="container-fluid footer navbar-fixed-bottom"> <!-- start footer --> </div>
它设置在整个宽度的底部。
编辑：这将设置页脚始终可见，这是你需要考虑的事情。
这是使用Twitter Bootstrap和新的导航栏固定底部类的方法：（你不知道我花了多长时间寻找这个）
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>
HenryW的回答很好，虽然我需要一些调整才能使其工作。 特别是以下内容也可以处理：
- 通过首先标记不可见并在javascript中设置可见，避免页面加载中的“跳跃”
- 处理浏览器正常调整
- 如果浏览器变小，页脚变得比页面更大，另外还要设置页脚备份页面
- 高度function调整
这些是为我调整了这些调整：
HTML：
<div id="footer" class="invisible">My sweet footer</div>
CSS：
#footer { padding-bottom: 30px; }
JavaScript的：
function setFooterStyle() { var docHeight = $(window).height(); var footerHeight = $('#footer').outerHeight(); var footerTop = $('#footer').position().top + footerHeight; if (footerTop < docHeight) { $('#footer').css('margin-top', (docHeight - footerTop) + 'px'); } else { $('#footer').css('margin-top', ''); } $('#footer').removeClass('invisible'); } $(document).ready(function() { setFooterStyle(); window.onresize = setFooterStyle; });
使用导航栏组件并添加.navbar-fixed-bottom类：
<div class="navbar navbar-fixed-bottom"></div>
加身
{ padding-bottom: 70px; }
要处理宽度约束布局使用以下内容，以便您不会得到圆angular，以便您的导航栏将齐平到应用程序的两侧
<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; }
你可以使用jQuery来处理这个问题：
$(function() { /** * Read the size of the window and reposition the footer at the bottom. */ var stickyFooter = function(){ var pageHeight = $('html').height(); var windowHeight = $(window).height(); var footerHeight = $('footer').outerHeight(); // A footer with 'fixed-bottom' has the CSS attribute "position: absolute", // and thus is outside of its container and counted in $('html').height(). var totalHeight = $('footer').hasClass('fixed-bottom') ? pageHeight + footerHeight : pageHeight; // If the window is larger than the content, fix the footer at the bottom. if (windowHeight >= totalHeight) { return $('footer').addClass('fixed-bottom'); } else { // If the page content is larger than the window, the footer must move. return $('footer').removeClass('fixed-bottom'); } }; // Call when this script is first loaded. window.onload = stickyFooter; // Call again when the window is resized. $(window).resize(function() { stickyFooter(); }); });
最简单的方法可能是使用Bootstrap navbar-static-bottom与设置主容器div的height: 100vh （新的CSS3 视口百分比 ）一起使用。 这将冲洗页脚到底部。
<main class="container" style="height: 100vh;"> some content </main> <footer class="navbar navbar-default navbar-static-bottom"> <div class="container"> <p class="navbar-text navbar-left">© Footer4U</p> </div> </footer>
#wrap { min-height: 100%; height: auto !important; height: 100%; width: 100%; /*Negative indent footer by its height*/ margin: 0 auto -60px; position: fixed; left: 0; top: 0; }
页脚高度与包装元素的底部缩进大小相匹配。
.footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; }
testingBootstrap 3.6.6 。
HTML
<div class="container footer navbar-fixed-bottom"> <footer> <!-- your footer content here --> </footer> </div>
CSS
.footer { bottom: 0; position: absolute; }
它看起来像height:100% '链'正在打破div#main 。 尝试添加height:100% ，这可能会让你更接近你的目标。
在这里，您可以在HAML（ http://haml.info ）中find该方法，页面底部的导航栏位于顶部和底部。
%body #main{:role => "main"} %header.navbar.navbar-fixed-top %nav.navbar-inner .container /HEADER .container /BODY %footer.navbar.navbar-fixed-bottom .container .row /FOOTER
把事情简单化。
footer { bottom: 0; position: absolute; }
您可能还需要通过将等于页脚高度的页margin-bottom添加到body来抵消页脚的高度。
这里是一个使用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>
小提琴
这是如何引导它：
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
只要使用页面源，你应该能够看到。 不要忘记顶部的<div id="wrap"> 。
唯一一个为我工作的人：
html { position: relative; min-height: 100%; padding-bottom:90px; } body { margin-bottom: 90px; } footer { position: absolute; bottom: 0; width: 100%; height: 90px; }
另一个可能的解决scheme，只使用媒体查询
@media screen and (min-width:1px) and (max-width:767px) { .footer { } } /* no style for smaller or else it goes weird.*/ @media screen and (min-width:768px) and (max-width:991px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:992px) and (max-width:1199px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:1120px){ .footer{ bottom: 0; width: 100%; position: absolute; } }
在bootstrap 4-alpha的最新版本中，我可以使用.fixed-bottom类来完成它。
<div class="fixed-bottom"></div>
以下是我如何使用它的脚注：
<footer class="footer fixed-bottom container"> <hr> <p>© 2017 Company, Inc.</p> </footer>
您可以在此处的展示位置文档中find更多信息。
