Bootstrap 粘页脚效果


Posted in Javascript onMarch 28, 2016

Bootstrap 粘页脚,说得具体一点就是“将固定高度的页脚紧贴页面底部”。由于项目的实际情况和模板有所区别,所以参照模板,小编不能确保快速的完成“粘页脚”的效果,那么还是要给大家分享本教程,写的不好还请各位大侠海涵!

一、页面效果

Bootstrap 粘页脚效果

页面非常简单,注意亮线为火狐边缘,可以很清楚的看到,页脚灰色部分沉浸在页面底部。

二、实例讲解

①、代码

<!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">
<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>
<head>
<title>发布项目</title>
</head>
<body>
<div id="wrap">
<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">
<div class=" container">
</div>
<div id="push"></div>
</div>
<div class="footer ">
</div>
</body>

body中第一级元素,两个div,分别为wrap和footer

第二级元素中,两个div,分别为container和push(如果你忘记了push这个div,ok,你的页面在缩放时会错乱的)

Bootstrap 粘页脚效果

以上列出的元素自然粘页脚必不可少的。

③、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中的元素重合,之前图上也有说明,那么其具体作用如何呢?

Bootstrap 粘页脚效果

通过firebug我们选中push的div,可以看到其正好包含着footer元素内容,如此将会阻止footer和container元素重合。

如此,以上关键点就介绍完了,你只要注意以下元素的分布,就可以轻松搞定bootstrap的粘页脚效果!

warp
push

有关本文给大家介绍的Bootstrap 粘页脚效果小编就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 #Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 #Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 #Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 #Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 #Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 #Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 #Javascript
You might like
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Python 实现随机数详解及实例代码
2017/04/15 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
MYSQL支持事务吗
2013/08/09 面试题
幼儿园托班开学寄语
2014/01/18 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
企业授权委托书范本
2014/04/02 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
银行招聘自荐信
2015/03/06 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
用Python将GIF动图分解成多张静态图片
2021/06/11 Python