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，你的页面在缩放时会错乱的）

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

③、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

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

赞 (0)

相关推荐

  • Bootstrap 粘页脚效果

    Bootstrap 粘页脚效果

    Bootstrap 粘页脚,说得具体一点就是"将固定高度的页脚紧贴页面底部".由于项目的实际情况和模板有所区别,所以参照模板,小编不能确保快速的完成"粘页脚"的效果,那么还是要给大家分享本教程,写的不好还请各位大侠海涵! 一.页面效果 页面非常简单,注意亮线为火狐边缘,可以很清楚的看到,页脚灰色部分沉浸在页面底部. 二.实例讲解 ①.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

  • asp.net利用母版制作页脚效果

    asp.net利用母版制作页脚效果

    本文为大家分享了asp.net利用母版制作页脚的具体过程,供大家参考,具体内容如下 1.母版创建流程略过. 2.创建母版页css:Site.css body { } .linkButton{ text-decoration:none; color:whitesmoke; } 3.母版页添加页脚. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser

  • JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g

  • js实现页面打印功能实例代码(附去页眉页脚功能代码)

    复制代码 代码如下: <html> <head></head> <style type="text/css" media="screen"> @media print{ .print {display:block;} .notPrint {display:none;} } </style> <script language="javascript"> function pre

  • 在ASP.NET 2.0中操作数据之十五：在GridView的页脚中显示统计信息

    在ASP.NET 2.0中操作数据之十五：在GridView的页脚中显示统计信息

    导言 除了需要了解产品的单价.库存量和订货量,并按等级排序之外,用户可能还对统计信息感兴趣,比如说平均价格.库存总量等等.这些统计信息常常显示在报表最下面的一个统计行中.GridView控件可以含有一个页脚行,我们可以通过编程将统计数据插入到它的单元格里面去.这个任务给了我们以下3个挑战: 1.配置GridView以显示它的页脚行 2.确定统计数据.即我们应该如何计算平均价格还有库存总量? 3.将统计信息插入到页脚行的相应的单元格中 在本节教程中,我们将会看到如何去征服这些挑战.另外呢,我们将创

  • python批量替换页眉页脚实例代码

    简介 本文分享的实例代码主要通过python语言实现批量替换页眉页脚的操作功能,具体如下. 代码 #!/usr/bin/env python # -*- coding: utf-8 -*- import win32com,os,sys,re from win32com.client import Dispatch, constants # 打开新的文件 suoyou = os.listdir('d:\\daizhuan') #print suoyou for i in suoyou: wenji

  • C# 添加PDF页眉/页脚的示例代码

    概述 页眉页脚是一篇完整.精致的文档的重要组成部分.在页眉页脚处,可以呈现的内容很多,如公司名称.页码.工作表名.日期.图片,如LOGO.标记等.在下面的文章中,将介绍如何在PDF中添加页眉页脚.通过代码测试,添加页眉页脚可以分两种情况来实现效果: 1.通过添加新的一页,在新建的页面上来添加页眉页脚 2.通过给现有文档直接添加页眉页脚 下面将根据这两种情况介绍具体的C#代码操作 使用工具 Free Spire.PDF for .NET 4.3(社区版) 示例代码(供参考) 1.新建一页来添加页眉

  • js 客户端打印html 并且去掉页眉、页脚的实例

    print() 方法用于打印当前窗口的内容,支持部分或者整个网页打印. 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮.通常,这会产生一个对话框,让用户可以取消或定制打印请求. win10下测试ie11.chrome.firefox.360.edge 都可以成功去掉页眉页脚: <!DOCTYPE html> <html> <head> <title>打印</title> <meta charset="utf-8

  • javascript实现window.print()去除页眉页脚

    打印时去除页眉页页脚 打印前加入下面代码即可 var HKEY_Root,HKEY_Path,HKEY_Key; 复制代码 代码如下: HKEY_Root="HKEY_CURRENT_USER"; HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; var head,foot,top,bottom,left,right; var Wsh=new ActiveXObject("

  • JS调用打印方法设置页眉页脚的实例

    设置页眉页脚 var HKEY_RootPath="HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; function PageSetup_del(){ try{ var WSc=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; WSc.RegWrite(HKEY_RootPath+HKEY_

随机推荐