Bootstrap 粘页脚效果(bootstrap页头)

编辑：rootadmin

推荐整理分享Bootstrap 粘页脚效果(bootstrap页头)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap页面模板,bootstrap页头,bootstrap首页,bootstrap 标签页,bootstrap首页布局,bootstrap页面添加弹出框,bootstrap页签,bootstrap页签,内容如对您有帮助，希望把文章链接给更多的朋友！

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

一、页面效果

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

二、实例讲解

①、代码

②、页面body布局

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

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

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

③、css分析

html,body的高度必须是%，也就是充满浏览器窗口高度

#wrap div的min-height必须是%，height呢，就自动适应。

关键点在于margin，top的外边距为0，而bottom的外边距则为-px。

注意，就是-px，理论上是footer高度（你可以通过firebug调试最佳高度）的负数，这一点也很关键！为什么要为负数呢？因为warp的高度本来就是%，为负数的话，就可以为footer留出显示完整的高度，否则footer将出现在页面滚动条下部。

#push元素，页面完整显示的时候，似乎看不出来push元素的作用，但当你页面缩放时，如果没有push，footer元素就会和container中的元素重合，之前图上也有说明，那么其具体作用如何呢？

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

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

warppush

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

JavaScript常用本地对象小结一、javascript是面向对象的编程语言封装：把相关的信息(无论数据或方法)存储在对象中的能力聚集：把一个对象存储在另一个对象内的能力继承：由另

JavaScript利用HTML DOM进行文档操作的方法 HTMLDOM树一、DOM简介DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内

javascript函数自动执行常用方法汇总在网页中JS函数自动执行常用三种方法在HTML中的Head区域中，有如下函数：SCRIPTLANGUAGE="JavaScript"functionnMyAutoRun(){//以下是您的函数的代码，请自行修改先

本文链接地址:https://www.jiuchutong.com/biancheng/375975.html 转载请保留说明！