我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?
当前回答
这是一个基于CSS的完全响应可变高度粘脚的解决方案。 优点:页脚允许可变高度，因为高度不再需要在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="https://maxcdn.bootstrapcdn.com/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>
这里是无前缀的SCSS(吞咽/咕噜声):
body {
display: flex;
flex-direction: column;
min-height: 100vh;
> * {
flex-grow: 0;
}
> nav + .container {
flex-grow: 1;
}
}
其他回答
简单的 js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
Update # 1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
我写我的简化粘脚代码与填充使用LESS。这个答案可能离题了，因为这个问题没有谈到填充，所以如果你有兴趣，可以查看这篇文章了解更多细节。
@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;
}
只需将类navbar-fixed-bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
你可以简单地尝试在页脚导航栏上添加一个类:
navbar-fixed-bottom
然后创建一个CSS命名为custom.css和body padding像这样..
body { padding-bottom: 70px; }
除了刚才添加的CSS之外，还需要在关闭wrap 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 -->
实时视图 编辑视图
