Bootstrap 粘页脚,你必须得学会的简单技能
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;
}#pushheight: 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;
}#pushheight: 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,这将是我鼓捣更多优秀文章的最强动力。
Bootstrap 粘页脚,你必须得学会的简单技能相关推荐
- 打印web页或文本文件时如何去掉讨厌的页眉,页脚?--暨开篇
经常会有朋友抱怨打印web页面或者文本文件时会有讨厌的页眉和页脚,其实这些只要经过简单的设置就可以去掉. 一般都是在页面设置(pagesetup)上进行修改.只要将页眉.页脚文本框中的 ...
- php 如何将富文本内容输出到word里面且添加页眉和页脚
之前一直用模板替换的方法进行word生成 基本满足公司需求,后来不能满足公司富文本编辑后的内容 生成到word里面 一开始想到是是phpword 因为一直用这个 ,想看看这个是否有提供对应的方法能使用 ...
- latex设置页边距和页眉页脚
简单的定义: \usepackage[margin=2cm]{geometry} 复杂的定义: 使用geometry宏包,可以让页边距和页眉页脚的设置变得非常简单 \documentclass[a4p ...
- 页边距和页眉页脚的设置
使用geometry宏包,可以让页边距和页眉页脚的设置变得非常简单 \documentclass[a4paper]{article} \usepackage{geometry} \geometry{l ...
- [网页设计]设计网页页脚的15个超实用技巧
你网站最重要的部分之一就是页脚.是的,我是认真的.这里也许并不适合伟大的设计或者令人印象深刻的内容会存在的区域,但这里是用户寻找信息的地方.所以在设计网站项目时候也不要忽略这个地方. 但是你需要在这里 ...
- 设计网页页脚的15个超实用技巧
你网站最重要的部分之一就是页脚.是的,我是认真的.这里也许并不适合伟大的设计或者令人印象深刻的内容会存在的区域,但这里是用户寻找信息的地方.所以在设计网站项目时候也不要忽略这个地方. 但是你需要在这里 ...
- 学习响应式BootStrap来写融职教育网站,Bootsrtap第五天页脚
学习响应式BootStrap来写融职教育网站,Bootsrtap第五天页脚 <!DOCTYPE html> <html lang="zh_CN"> < ...
- CSS + DIV 让页脚始终底部
原文:CSS + DIV 让页脚始终底部 一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部, ...
- word2010页脚页码的总页数修改方法
3很多时候做WORD文档时,首页和尾页通常是做为封面与封底的是不做页码统计的. 这时候就需要总页面上减去首页和尾页的数量.以下为修改总页数方法 1.打开WORD文档设置页眉页脚,页脚设置页码, 2.设 ...
最新文章
- 前端红宝书《JavaScript高级程序设计》核心知识总结
- 【 MATLAB 】DFT性质讨论(一)线性、循环反转、共轭与实序列的对称性的MATLAB实现
- c语言char有什么作用,C语言中char*和char[]用法区别分析
- 用Java描述数据结构之线性表的链式存储(链表),模拟LinkedList实现
- WinAPI: midiOutShortMsg - 向输出设备发送 MIDI 短消息
- python 数据内容保留最后一位_python3-数据结构和算法 -- 1.3 保留最后 N 个元素
- hessian无法获取连接_PPPoE拨号设置完成后无法上网解决方法【详解】
- linux xxx is not in the sudoers file.This incident will be reported.的解决方法
- dts同步常见问题_家庭影院十大常见故障解决办法
- 推荐一款调试工具:深蓝串口调试工具 2021秋季版(2.16.1.),一直使用这个,最近更新好快。
- Laravel文档梳理1、安装与初步配置
- 网上流传的飞扬学院Java_收获| 云和JAVA、UI双班毕业,飞扬青春再出发!
- 【IoT】战略规划管理:BLM模型连载三之进化篇
- 平面设计常用计算机工具,终于明白平面设计常用硬件设备
- 移动硬盘安装ubuntu20.04.5(重装无数次的一个教程)
- HTML5游戏化互动学习平台,h5游戏平台_触摸型互动slg黄油手游
- AUTOCAD——调整十字光标、CAD表格文字对齐方式
- 如何在 Mac 上卸载 Java
- html全选替换,网站上如何实现全选与反选
- 李艾30场直播数据全解析,挖掘直播高转化技巧
热门文章
- BZOJ2713 [Violet 2]愚蠢的副官BZOJ1183 [Croatian2008]Umnozak
- 双“12”激战正酣,云计算成电商企业“定海神针”
- 书论19 释智果《心成颂》
- dotnet tool
- Android edittext刚进入页面取消焦点
- Matlab 在线使用 | 推荐
- 【分享基金考试资料】如何才能取得基金从业人员资格?结果多久有效?
- python中的选择最高的成绩_python 输入学生成绩 若成绩在90、流程图_Python习题选编...
- 如何大量注册亚马逊买家号?
- .net基础学java系列(七)赶鸭子上架看项目代码