divfooter标签css实现位于页⾯底部固定
作为⼀个页⾯仔你⼀定遇到过：当⼀个HTML页⾯中含有较少的内容时，Web页⾯的“footer”部分随着飘上来，处在页⾯的半腰中间，给视觉效果带来极⼤的影响，让你的页⾯看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页⾯的“footer”部分永远固定在页⾯的底部呢？先来看下下⾯的代码吧
这是第⼀种⽅案，后⾯还有⼏种
HTML代码
复制代码
代码如下:
<div class="container">
<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代码
复制代码
代码如下:
html,body{margin:0;padding:0;height:100%}
.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特效
结构简单清晰，⽆需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。
缺点：
不⾜之处就是需要给div#footer容器设置⼀个固定⾼度，这个⾼度可以根据你的需求进⾏设置，其单位可以是px也可以是em，⽽且还需要将div#page容器的padding-bottom（或border-bottom-width）设置⼤⼩等于（或略⼤于）div#footer的⾼度，才能正常运⾏。
⽅法⼆：
这种⽅法是利⽤footer的margin-top负值来实现footer永远固定在页⾯的底部效果，下⾯我们具体看是如何实现的。
HTML代码
复制代码
代码如下:
<div id="header">header</div>
<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代码
复制代码
代码如下:
html,body{height:100%;margin:0;padding:0;}
#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部分⾃适应⾼度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。