③、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>
与第一种无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; }
html的最小高度为100%,而不再是wrap 。
html的位置为relative(相对),而footer的位置为absolute(绝对),非常关键。
body的margin-bottom为footer的高度200px。