div footer标识css完成坐落于网页页面底部固定不动

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

做为1个网页页面仔你1定遇到过:当1个HTML网页页面中含有较少的內容时,Web网页页面的“footer”一部分伴随着飘上来,处在网页页面的半腰正中间,给视觉效果实际效果带来巨大的危害,让你的网页页面看上去很不太好看,非常是如今宽屏愈来愈多,这类状况更是普遍。那末怎样将Web网页页面的“footer”一部分始终固定不动在网页页面的底部呢?先看来下下面的编码吧
这是第1种计划方案,后边也有几种
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;}

完成这页脚始终固定不动在网页页面的底部,大家只必须4个div,在其中div#container是1个器皿,在这个器皿当中,大家包括了div#header(头顶部),div#page(网页页面行为主体一部分,大家能够在这个div中提升更多的div构造,如上面的编码所示),div#footer(页脚一部分)
下面大家1起看来看这类方式的完成基本原理:
<html>和<body>标识:html和body标识中务必将高宽比(height)设定为“100%”,这样大家便可以在器皿上设定百分比高宽比,另外必须将html,body的margin和padding都移除,也便是html,body的margin和padding都为0;

div#container器皿:div#container器皿务必设定1个最少高宽比(min-height)为100%;这关键使他在內容非常少(或沒有內容)状况下,能维持100%的高宽比,但是在IE6是不适用min-height的,因此以便适配IE6,大家必须对min-height做1定的适配解决,实际能够看前面的编码,此外大家还必须在div#container器皿中设定1个”position:relative”便于于里边的元素开展肯定精准定位后不容易跑了div#container器皿;
div#page器皿:div#page这个器皿有1个很重要的设定,必须在这个器皿上设定1个padding-bottom值,并且这个值要等于(或略超过)页脚div#footer的高宽比(height)值,自然你在div#page中可使用border-bottom人水-width来取代padding-bottom,但有1点必须留意,此处你干万不可以应用margin-bottom来替代padding-bottom,要不然会没法完成实际效果;

div#footer器皿:div#footer器皿务必设定1个固定不动高宽比,企业能够是px(或em)。div#footer还必须开展肯定精准定位,而且设定bottom:0;让div#footer固定不动在器皿div#container的底部,这样便可以完成大家前面所说的实际效果,当內容仅有1点时,div#footer固定不动在显示屏的底部(由于div#container设定了1个min-height:100%),当內容高宽比超出显示屏的高宽比,div#footer也固定不动在div#container底部,也便是固定不动在网页页面的底部。你还可以给div#footer加设1个”width:100%”,让他在全部网页页面上获得拓宽;
别的div:至于别的器皿能够依据自身要求开展设定,例如说前面的div#header,div#left,div#content,div#right等。
优势
构造简易清楚,不用js和任何hack能完成各访问器下的适配,而且也融入iphone。
缺陷
不够的地方便是必须给div#footer器皿设定1个固定不动高宽比,这个高宽比能够依据你的要求开展设定,其企业能够是px还可以是em,并且还必须将div#page器皿的padding-bottom(或border-bottom-width)设定尺寸等于(或略超过)div#footer的高宽比,才可以一切正常运作。
方式2
这类方式是运用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:⑹0px;/*等于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是同辈关联,不像方式1,div#footer在div#container器皿內部。自然你还可以依据你的必须把內容提升在div#container器皿中,如:1个3列合理布局,并且还带有header一部分。

方式1和方式2有几点是彻底同样的,例如说方式1中的1⑶3点,在方式2中都1样,换句话说,方式2中也必须把html,body高宽比设定为100%,并重设margin,padding为0;其2div#container也必须设定min-height:100%,并解决好IE6下的min-height适配难题;其3也必须在div#page器皿上设定1个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一部分自融入高宽比。