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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
详解Angular路由之路由守卫
May 10 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 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
pdo中使用参数化查询sql
2011/08/11 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP可变函数学习小结
2015/11/29 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
python递归法解决棋盘分割问题
2019/07/17 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
法学毕业生自荐信
2013/11/13 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
高中数学教学反思
2014/01/30 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
孔庙导游词
2015/02/04 职场文书
创业计划书之美容店
2019/09/16 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL