div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见,本文将介绍两种解决方案，需要了解的朋友可以参考下
作为一个页面仔你一定遇到过：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？先来看下下面的代码吧
这是第一种方案，后面还有几种
HTML代码
代码如下:
<div class="header">这是头部</div>
<div class="page clearfix">
<div class="left">left sidebar</div>
<div class="content">main content</div>
<div class="right">right sudebar</div>
</div>
<div class="footer">footer section</div>
</div>
CSS代码
代码如下:
.container{min-height:100%;height:auto !important;height:100%;/*ie6不识别min-height,如上述处理*/position:relative;}
.header{background:#ff0;padding:10px;}
.page{width:960px;margin:0 auto;padding-bottom:60px;/*padding等于footer的高度*/}
.footer{position:absolute;bottom:0;width:100%;height:60px;/*footer的高度*/background:#6cf;clear:both;}
.left{width:220px;height:800px;float:left;margin-right:20px;background:lime;}
.content{background:orange;width:480px;float:left;margin-right:20px;}
.right{width:220px;float:right;background:green;}
.clearfix:after,
.clearfix:before{content:"";display:table}
.clearfix:after{clear:both;overflow:hidden}
.clearfix{zoom:1;}
实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了div#header（头部），div#page（页面主体部分，我们可以在这个div中增加更多的div结构，如上面的代码所示），div#footer（页脚部分）
下面我们一起来看看这种方法的实现原理：
<html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；
div#container容器：div#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，另外我们还需要在div#container容器中设置一个”position:relative”以便于里面的元素进行绝对定位后不会跑了div#container容器；
div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果；
div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个”width:100%”，让他在整个页面上得到延伸；
其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。
缺点：
不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。
方法二：
这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果，下面我们具体看是如何实现的。
HTML代码
代码如下:
<div id="page" class="clearfix">
<div id="left">left sidebar</div>
<div id="content">main content</div>
<div id="right">right sidebar</div>
</div>
</div>
<div id="footer">footer</div>
CSS代码
代码如下:
#container{min-height:100%;height:auto !important;height:100%;}
#page{padding-bottom:60px;/*等于或者大于footer的高度*//*border-bottom-width:60px;边框宽度也可以*/}
#header{padding:10px;background:lime;}
#footer{position:relative;margin-top:-60px;/*等于footer的高度*/height:60px;clear:both;background:#c6f;}
#left{width:18%;float:left;margin-right:2%;background:orange;}
#content{width:60%;float:left;margin-right:2%;background:yellow;}
#right{width:18%;float:right;background:green;}
.clearfix:after{visibility:hidden;height:0;font-size:0;display:block;content:" ";clear:both;}
* html .clearfix{zoom:1;}/* ie6 */
*:first-child+html .clearfix{zoom:1;} /* ie7 */
上面的代码是最基本的HTML Code，同时你也发现了div#footer和div#container是同辈关系，不像方法一，div#footer在div#container容器内部。当然你也可以根据你的需要把内容增加在div#container容器中，如：一个三列布局，而且还带有header部分。
方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二div#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在div#page容器上设置一个padding-bottom或border-bottom-width值等于div#footer高度值（或略大于）。那么两种方法不同之处是：
div#footer放在div#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与div#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏div#container容器的min-height值；
div#footer进行margin-top的负值设置，并且此值等于div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。
缺点：
要给footer设置固定值，因此无法让footer部分自适应高度。
div footer标签css实现位于页面底部固定的更多相关文章
- footer部分，当页面主题内容不满一屏时，始终位于页面底部
比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...
- css让footer永远保持在页面底部
案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...
- DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- 记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
- 让footer固定在页面底部（CSS-Sticky-Footer）
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- css解决无论页面长短footer永远置底
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- hdu 1181 变形课（dfs）
Problem Description 呃......变形课上Harry碰到了一点小麻烦,因为他并不像Hermione那样能够记住所有的咒语而随意的将一个棒球变成刺猬什么的,但是他发现了变形咒语的一个 ...
- HDU2842-Chinese Rings(递推+矩阵高速幂)
pid=2842">题目链接 题意:求出最少步骤解出九连环. 取出第k个的条件是,k-2个已被取出,k-1个仍在支架上. 思路:想必九连环都玩过吧,事实上最少步骤就是从最后一个环開始. ...
- linux中grep使用方法具体解释
查找特定字符串并颜色显示 [root@fwq test]# grep -n 'the' regular_express.txt --color=auto 8:I can't finish the te ...
- 【c语言】调整数组使奇数所有都位于偶数前面
// 调整数组使奇数全部都位于偶数前面 // 输入一个整数数组,实现一个函数,来调整该数组中数字的顺序使得数组中全部的奇数位于数组的前半部分, // 全部偶数位于数组的后半部分. #include & ...
- 【概率DP入门】
http://www.cnblogs.com/kuangbin/archive/2012/10/02/2710606.html 有关概率和期望问题的研究 摘要 在各类信息学竞赛中(尤其是ACM竞赛中) ...
- LinQ学习手册
LinQ : Language Integrated Query(语言集成查询); 1.以统一方式操作各种数据源,减少数据访问的复杂性. 优点在于封装了SQL语句,只对对象进行操作(增删改查),代码量 ...
- ios消息的交互方式
注意这些都是界面回传(即从第二个界面传到第一个界面,从第一个界面传到第二个界面的时候用第二个界面的属性即可) iOS消息的交互方式有4种,分别为:通知,代理,block,kvo 现在我们对这个4中 ...
- 修复CefSharp浏览器组件中文输入Bug
概述 最近在win10上开发wpf应用,需要将CefSharp中wpf版本的浏览器组件(版本号v51.0.0)嵌入到应用中,但是发现不支持中文输入,GitHub上有这个问题的描述,参照其提到的方法可以 ...
- 安装nginx 做反向代理
nginx反向代理配置实例(前nginx+后apache)Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP ...
- 判断mysqli函数里的sql语句是否有错和影响行数
<?php $mysqli=@new mysqli("localhost", "root", "123456", "xsph ...