版权声明：欢迎转载，请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/50987126
Bootstrap 粘页脚（你必须得学会的简单技能），说得具体一点就是“将固定高度的页脚紧贴页面底部”。说完这句话，王二我有点诚惶诚恐，其实这句话出自bootstrap入门介绍，不过呢，请原谅我的粗鲁（灵感非原创），毕竟项目的实际情况和模板有所区别，所以参照模板，也不能确保快速的完成“粘页脚”的效果，那么还是听我来唠叨一下吧！
一、页面效果
页面非常简单，注意亮线为火狐边缘，可以很清楚的看到，页脚灰色部分沉浸在页面底部。
二、实例讲解（无navbar-fixed-top）
①、代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" />
<style type="text/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;
}
</style>
<title>发布项目</title>
</head>
<body>
<div id="wrap">
<nav class="navbar navbar-default navbar-fixed">
</nav>
<div class=" container project_choose">
<div class="row">
<div class="col-md-5 project_general">
<span class="f14">我有一个梦想，有创意项目，有创意产品，点击发布回报</span>
<div class="blank20"></div>
<div>
<a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即发布产品</a>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-5 project_agency">
<span class="f14">我有创业梦想，有融资需求，点击发布股权</span>
<div class="blank20"></div>
<div>
<button type="button" class="btn btn-primary">立即发股权</button>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div class="footer ">
<div class="container">
<div class="row footer-top">
<div class="col-sm-6 col-lg-6">
<h4></h4>
<p>欢迎你加入，这里有你想要的.</p>
</div>
<div class="col-sm-6 col-lg-5 col-lg-offset-1">
<div class="row about">
<div class="col-xs-3">
<h4>关于</h4>
<ul class="list-unstyled">
<li>
<a href="">关于我们</a>
</li>
</ul>
</div>
<div class="col-xs-3">
<h4>联系方式</h4>
<ul class="list-unstyled">
<li>
<a target="_blank" title="云梦网官方微博" href="">新浪微博</a>
</li>
<li>
<a href="">电子邮件</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="row footer-bottom">
<ul class="list-inline text-center">
<li>Copyright ©2016. n 洛阳限公司 Software All Rights Reserved.</li>
</ul>
</div>
</div>
</div>
</body>
</html>②、页面body布局
<body>
<div id="wrap">
<nav class="navbar navbar-default navbar-fixed">
</nav>
<div class=" container">
</div>
<div id="push"></div>
</div>
<div class="footer ">
</div>
</body>- body中第一级元素，两个div，分别为wrap和footer
- 第二级元素中，一个nav，两个div，分别为container和push（如果你忘记了push这个div，ok，你的页面在缩放时会错乱的）
以上列出的元素自然粘页脚必不可少的。
③、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;
}与第一种无navbar-fixed-top区别在于：
- html的最小高度为100%，而不再是wrap 。
- html的位置为relative（相对），而footer的位置为absolute（绝对），非常关键。
- body的margin-bottom为footer的高度200px。
ok，之前做了第一种，目前换为第二种，更加简洁，推荐。
感谢您阅读【沉默王二的博客】，如果王二的博客给您带来一丝帮助或感动，我（也就是王二）将不甚荣幸。
如果您碰巧喜欢，可以留言或者 加qq群120926808，这将是我鼓捣更多优秀文章的最强动力。
