Twitter的引导3粘脚

我一直在使用twitter bootstrap框架已经有一段时间了,他们最近更新到版本3!

我很难让粘脚粘到底部,我使用了twitter bootstrap网站提供的启动模板,但仍然没有运气,有什么想法?

只需将navbar-fixed-bottom类添加到页脚即可。

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

参考官方的Boostrap3粘页脚示例,不需要添加<div id="push"></div> ,CSS更简单。

官方例子中使用的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; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; } 

和基本的HTML:

 <body> <!-- Wrap all page content here --> <div id="wrap"> <!-- Begin page content --> <div class="container"> </div> </div> <div id="footer"> <div class="container"> </div> </div> </body> 

你可以在sticky-footer exmaple的源代码中find这个css的链接。

 <!-- Custom styles for this template --> <link href="sticky-footer.css" rel="stylesheet"> 

完整的url: http : //getbootstrap.com/examples/sticky-footer/sticky-footer.css

这里是一个方法,将添加一个粘性页脚,不需要任何额外的CSS或Javascript以外的已经在Bootstrap中,并不会干扰您当前的页脚。

示例: 易粘页脚

只需将其直接复制并粘贴到您的代码中。 没有大惊小怪。

 <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M. <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a> </p> <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right"> <span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a> </div> </div> 

除了刚刚添加的CSS之外,请记住在closures换行div之前需要添加push div

HTML的基本结构是

 <div id="wrap"> page content here <div id="push"></div> </div> <!-- end wrap --> <div id="footer"> footer content here </div> <!-- end footer --> 

即时取景
编辑视图

关于这个问题,我有点晚了,但是我遇到了这个post,因为我刚刚被这个问题困扰,终于find了一个非常简单的方法来克服它,只需使用navbar-fixed-bottom类的navbar-fixed-bottom 。 例如:

 <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <span class="navbar-text"> Something useful </span> </div> </div> 

HTH

这里的粘滞页脚简化代码截至今天,因为他们总是优化它,这是好的:

HTML

 <!DOCTYPE html> <html lang="en"> <head></head> <body> <!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> </div> <footer> <div class="container"> <p class="text-muted">Place sticky footer content here.</p> </div> </footer> </body> </html> 

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; } 

这是我对这个问题的更新解决scheme。

  /* 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; border-top: 1px solid #eee; text-align: center; } .site-footer-links { font-size: 12px; line-height: 1.5; color: #777; padding-top: 20px; display: block; text-align: center; float: center; margin: 0; list-style: none; } 

像这样使用它:

 <div class="footer"> <div class="site-footer"> <ul class="site-footer-links"> <li>© Zee and Company<span></span></li> </ul> </div> </div> 

要么

 html, body { height: 100%; } .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } .site-footer, .page-wrap:after { height: 142px; } .site-footer { background: orange; } 

这个粘性的例子不适合我。 我的解决scheme

 #footer { position: fixed; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 3em; background-color: #f5f5f5; text-align: center; padding-top: 1em; } 

推入div应该在wrap之后进行,而不是像这样

 <div id="wrap"> *content goes here* </div> <div id="push"> </div> <div id="footer"> <div class="container credit"> </div> <div class="container"> <p class="muted credit">© Your Page 2013</p> </div> </div> 

由OP回答:

将此添加到您的CSS文件。

 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 -60px; } /* Set the fixed height of the footer here */ #push, #footer { height: 60px; } #footer { background-color: #eee; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } 

我想要一个灵活的粘脚 ,这就是我来这里的原因。 最佳答案让我朝着正确的方向前进。

目前(10年10月2日)引导3 CSS粘脚(固定大小)看起来像这样:

 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; } 

只要页脚具有固定的大小,身体的底部边缘创build一个允许页脚坐在一个口袋的推动。在这种情况下,两者都设置为60px。 但是,如果页脚不是固定的,并且超过60px高度,它将覆盖您的页面内容。

使灵活:删除CSS边缘和页脚高度。 然后添加JavaScript来获得页脚高度,并设置边缘marginBottom。 这是用setfooter()函数完成的。 接下来添加页面首次加载时的事件监听器,并调整运行setfooter的大小。 注意:如果页脚有手风琴或触发大小更改的其他任何内容,而没有调整窗口大小,则必须再次调用setfooter()函数。

运行代码片段,然后全屏显示。

 function setfooter(){ var ht = document.getElementById("footer").scrollHeight; document.body.style.marginBottom = ht + "px"; } window.addEventListener('resize', function(){ setfooter(); }, true); window.addEventListener('load', function(){ setfooter(); }, true); 
 html { position: relative; min-height: 100%; } .footer { position: absolute; bottom: 0; width: 100%; /* additional style for effect only */ text-align: center; background-color: #333; color: #fff; } body{ /* additional style for effect only not needed in bootstrap*/ padding:0; margin: 0; } 
 <div> Page content <br> <br> line 3 <br> <br> line 5 <br> <br> line 7 </div> <footer id="footer" class="footer"> <div class="container"> <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p> </div> </footer> 

总结所有这些,只要记住一件事,除了页脚之外,每件事都应该有min-height: 100%或者更less。

我使用LESS编写了简化的粘性页脚代码。 这个答案可能是无关紧要的,因为这个问题没有讨论填充,所以如果你有兴趣查看这个post的更多细节。

 @footer-padding: 40px; // Set here the footer padding @footer-inner-height: 150px; // Set here the footer height (without padding) /* Calculates the overall footer height */ @footer-height: @footer-inner-height + @footer-padding*2; html { position: relative; min-height: 100%; } body { /* This avoids footer to overlap the page content */ margin-bottom: @footer-height; } footer{ /* Fix the footer on bottom and give it fixed height */ position: absolute; bottom: 0; width: 100%; height: @footer-height; padding: @footer-padding 0; } 

简单的js

 if ($(document).height() <= $(window).height()) { $("footer").addClass("navbar-fixed-bottom"); } 

基于Jek-fdrv的回答 ,我添加了一个.on('resize', function()以确保它在每个设备和每个分辨率上都能正常工作:

 $(window).on('resize', function() { if ($(document).height() <= $(window).height()) { $('footer').addClass("navbar-fixed-bottom"); } else { $('footer').removeClass("navbar-fixed-bottom"); } }); 

这是一个基于CSS的解决scheme,用于完全响应可变高度粘性页脚。
优点:页脚允许可变高度,因为高度不再需要在CSS中进行硬编码。

 body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } body > * { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } body > nav + .container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* Reset CSS and some footer styling. Only needed on StackOverflow */ body { padding: 50px 0 0; margin: 0; } footer { background-color: #f8f8f8; padding: 15px 0 5px; border-top: 1px solid #e7e7e7; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!DOCTYPE html> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Responsive sticky footer of any height</h1> </div> <p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p> </div> <footer class="footer"> <div class="container"> <p class="text-muted">Place sticky footer content here.</p> <p class="text-muted">And some more content.</p> <p class="text-muted">And more...</p> </div> </footer> 

在Haml&Sass的话中,所有这一切都是必要的:

Haml for app/view/layouts/application.html.haml

 %html %head %body Some body stuff %footer footer content 

Sass for app/assets/stylesheets/application.css.sass

 $footer-height: 110px html position: relative min-height: 100% body margin-bottom: $footer-height body > footer position: absolute bottom: 0 width: 100% height: $footer-height 

基于http://getbootstrap.com/examples/sticky-footer-navbar/

如果你不想使用脚本的类的引导生成。 你也应该写一些javascript:

 $(document).ready(function(){ $.fn.resize_footer(); $(window).resize(function() { $.fn.resize_footer(); }); }); (function($) { $.fn.resize_footer = function(){ $('body > .container-fluid').css('padding-bottom', $('body > footer').height()); }; }); 

它将防止固定页脚重叠的内容,并且当用户改变窗口/屏幕尺寸时,它将调整padding-bottom

在上面的脚本中,我假设页脚直接放置在身体标签内,如下所示:

 <body> ... content of your page ... <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <div class="muted pull-right"> Something useful </div> ... some other footer content ... </div> </div> </body> 

这绝对不是最好的解决scheme(因为JS可以避免),但是它没有重叠的问题,它很容易实现和响应( height不是在CSS中硬编码)。

 #myfooter{ height: 3em; background-color: #f5f5f5; text-align: center; padding-top: 1em; } 
 <footer> <div class="footer"> <div class="container-fluid" id="myfooter"> <div class="row"> <div class="col-md-12"> <p class="copy">Copyright &copy; Your words</p> </div> </div> </div> </div> </footer> 

这是一个非常简单和干净的粘脚,你可以在bootstrap中使用。 完全响应!

HTML

 <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src=""> </a> </div> </div> </nav> <footer></footer> </body> </html> 

CSS

 html { position: relative; min-height: 100%; } body { margin: 0 0 100px; } footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; background-color: red; } 

例如: CodePen Demo

当前版本的bootstrap似乎不再适用于此function。 如果您下载了他们的粘页脚导航栏示例并在主体区域放置大量内容,页脚将被推下视口的底部。 它根本不粘。

使用flexbox是我发现的最简单的方法,从CSS技巧的家伙。 这是真正的粘页脚,它适用于内容<100%的页面和> 100%的页面:

 <body> <div class="content"> content </div> <footer></footer> </body> 

和CSS:

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

请注意,这是bootstrap不可知的,所以它可以在bootstrap下运行,没有它。

你可以简单地尝试在你的页脚上添加一个类:

 navbar-fixed-bottom 

然后像这样创build一个名为custom.cssbody padding的CSS。

 body { padding-bottom: 70px; } 

只需使用flex! 确保在HTML中使用body和main,这是最好的解决scheme之一(除非你需要IE9的支持)。 它不需要固定的高度或类似。

这也是物化的推荐!

 body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } 

这一直由flexbox解决,一次又一次:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

 <body class="Site"> <header>…</header> <main class="Site-content">…</main> <footer>…</footer> </body> 

CSS

 .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; }