div footer标签css实现位于页面底部固定

巴扎黑 原创: 2017-06-27 09:51:54 2137浏览

Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见,本文将介绍两种解决方案，需要了解的朋友可以参考下

作为一个页面仔你一定遇到过：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？先来看下下面的代码吧
这是第一种方案，后面还有几种
HTML代码

代码如下:

<p class="container"> 
<p class="header">这是头部</p> 
<p class="page clearfix"> 
<p class="left">left sidebar</p> 
<p class="content">main content</p> 
<p class="right">right sudebar</p> 
</p> 
<p class="footer">footer section</p> 
</p>

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;}

实现这页脚永远固定在页面的底部，我们只需要四个p，其中p#container是一个容器，在这个容器之中，我们包含了p#header（头部），p#page（页面主体部分，我们可以在这个p中增加更多的p结构，如上面的代码所示），p#footer（页脚部分）
下面我们一起来看看这种方法的实现原理：
<html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；

p#container容器：p#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，另外我们还需要在p#container容器中设置一个”position:relative”以便于里面的元素进行绝对定位后不会跑了p#container容器；
p#page容器：p#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚p#footer的高度（height）值，当然你在p#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果；

p#footer容器：p#footer容器必须设置一个固定高度，单位可以是px(或em)。p#footer还需要进行绝对定位，并且设置bottom:0；让p#footer固定在容器p#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，p#footer固定在屏幕的底部（因为p#container设置了一个min-height:100%），当内容高度超过屏幕的高度，p#footer也固定在p#container底部，也就是固定在页面的底部。你也可以给p#footer加设一个”width:100%”，让他在整个页面上得到延伸；
其他p：至于其他容器可以根据自己需求进行设置，比如说前面的p#header,p#left,p#content,p#right等。
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。
缺点：
不足之处就是需要给p#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将p#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）p#footer的高度，才能正常运行。
方法二：
这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果，下面我们具体看是如何实现的。
HTML代码

代码如下:

<p id="header">header</p> 
<p id="page" class="clearfix"> 
<p id="left">left sidebar</p> 
<p id="content">main content</p> 
<p id="right">right sidebar</p> 
</p> 
</p> 
<p id="footer">footer</p>

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，同时你也发现了p#footer和p#container是同辈关系，不像方法一，p#footer在p#container容器内部。当然你也可以根据你的需要把内容增加在p#container容器中，如：一个三列布局，而且还带有header部分。

方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二p#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在p#page容器上设置一个padding-bottom或border-bottom-width值等于p#footer高度值（或略大于）。那么两种方法不同之处是：
p#footer放在p#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与p#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏p#container容器的min-height值；
p#footer进行margin-top的负值设置，并且此值等于p#footer的高度值，而且也要和p#page容器的padding-bottom(或border-bottom-width)值相等。
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。
缺点：
要给footer设置固定值，因此无法让footer部分自适应高度。

以上就是div footer标签css实现位于页面底部固定的详细内容，更多请关注php中文网其它相关文章！

footer css 样式表页面位于标签实现 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：HTML5 <footer>标签元素 html底部footer css布局教程下一条：HTML table、form表单标签的介绍