③、css分析
html,body { height: 100%; } #wrap { min-height: 100%; height: auto !important; margin: 0 auto -200px; } #push height: 200px; } .footer { border-top: 1px solid #e5e5e5; color: #777; padding: 19px 0; background-color: #f5f5f5; }
html,body的高度必须是100%，也就是充满浏览器窗口高度
#wrap div的min-height必须是100%，height呢，就自动适应。
关键点在于margin，top的外边距为0，而bottom的外边距则为-200px。
注意，就是-200px，理论上是footer高度（你可以通过firebug调试最佳高度）的负数，这一点也很关键！为什么要为负数呢？因为warp的高度本来就是100%，为负数的话，就可以为footer留出显示完整的高度，否则footer将出现在页面滚动条下部。
#push元素，页面完整显示的时候，似乎看不出来push元素的作用，但当你页面缩放时，如果没有push，footer元素就会和container中的元素重合，之前图上也有说明，那么其具体作用如何呢？通过firebug我们选中push的div，可以看到其正好包含着footer元素内容，如此将会阻止footer和container元素重合。
如此，以上关键点就介绍完了，你只要注意以下元素的分布，就可以轻松搞定bootstrap的粘页脚效果！
warp
push
三、实例讲解（有navbar-fixed-top）
①、核心代码
<head> <link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" /> <style type="text/css"> html { position: relative; min-height: 100%; } body { margin-bottom: 200px; } .footer { border-top: 1px solid #e5e5e5; color: #777; padding: 19px 0; background-color: #f5f5f5; position: absolute; bottom: 0; width: 100%; height: 200px; } </style> <title>发布项目</title> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> </nav> <div class=" container project_choose"> <div class="row"> </div> </div> </div> <div class="footer "> <div class="container"> </div> </div> </body> </html>
②、页面body布局
<body>
<nav class="navbar navbar-default navbar-fixed-top">
</nav>
<div class=" container">
</div>
<div class="footer ">
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
与第一种无navbar-fixed-top区别在于：
body中不再嵌入wrap，并列元素分别为nav（导航），container，footer
并且去掉push的div
③、css分析
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 200px;
}
.footer {
border-top: 1px solid #e5e5e5;
color: #777;
padding: 19px 0;
background-color: #f5f5f5;
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
}
与第一种无navbar-fixed-top区别在于：
html的最小高度为100%，而不再是wrap 。
html的位置为relative（相对），而footer的位置为absolute（绝对），非常关键。
body的margin-bottom为footer的高度200px。
ok，之前做了第一种，目前换为第二种，更加简洁，推荐。
