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
如果你不想使用脚本的类的引导生成。 你也应该写一些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 © 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.css和body 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; }
