Bootstrap 粘页脚.doc

Bootstrap 粘页脚
Bootstrap 粘页脚，说得具体一点就是“将固定高度的页脚紧贴页面底部”。说完这句话，王二我有点诚惶诚恐，其实这句话出自bootstrap入门介绍，不过呢，请原谅我的粗鲁（灵感非原创），毕竟项目
②、页面body布局









body中第一级元素，两个div，分别为wrap和footer
第二级元素中，一个nav，两个div，分别为container和push（如果你忘记了push这个div，ok，你的页面在缩放时会错乱的） 以上列出的元素自然粘页脚必不可少的。
③、css分析
html,body {
height: %;
}
#wrap {
min-height: %;
height: auto !important;
margin: auto -px;
}
#push
height: px;
}
.footer {
border-top: px solid #eee;
color: #;
padding: px ;
background-color: #fff;
}
html,body的高度必须是%，也就是充满浏览器窗口高度
#wrap div的min-height必须是%，height呢，就自动适应。
关键点在于margin，top的外边距为，而bottom的外边距则为-px。
注意，就是-px，理论上是footer高度（你可以通过firebug调试最佳高度）的负数，这一点也很关键！为什么要为负数呢？因为warp的高度本来就是%，为负数的话，就可以为footer留出显示完整的高度，否则footer将出现在页面滚动条下部。
#push元素，页面完整显示的时候，似乎看不出来push元素的作用，但当你页面缩放时，如果没有push，footer元素就会和container中的元素重合，之前图上也有说明，那么其具体作用如何呢？通过firebug我们选中push的div，可以看到其正好包含着footer元素内容，如此将会阻止footer和container元素重合。
如此，以上关键点就介绍完了，你只要注意以下元素的分布，就可以轻松搞定bootstrap的粘页脚效果！
warp
push
三、实例讲解（有navbar-fixed-top）
①、核心代码html {
position: relative;
min-height: %;
}
body {
margin-bottom: px;
}
.footer {
border-top: px solid #eee;
color: #;
padding: px ;
background-color: #fff;
position: absolute;
bottom: ;
width: %;
height: px;
}

发布项目