如何将页脚固定在页面尾部,footer标签css达成位

怎样将页脚固定在页面底部

2011/12/20 · CSS · 1 评论 · 来源: w3cplus     · CSS

来源:w3cplus

用作多少个Web的前端攻城师,在创建页面效果时必然有相逢上边这种气象:当一个HTML页面中隐含超少的内容时,Web页面的“footer”部分随着飘上来,处在页面包车型大巴半腰中间,给视觉效果带给相当大的震慑,令你的页面看上去十分不佳看,特别是后天宽屏更加的多,这种场馆越发布满。那么哪些将Web页面包车型客车“footer”部分永恒恒久在页面包车型地铁平底呢?

注意了此处所说的是页脚footer永世永世在页面包车型客车平底,并不是长久永远在显示屏显示器的尾巴部分,换句话说,正是当内容唯有一丝丝时,Web页面突显在浏览器底部,当内容惊人超过浏览器中度时,Web页面的footer部分在页面包车型地铁最底层,由此可以预知Web页面包车型大巴footer部分永久在页面包车型大巴最底层,换句说,Footer部分世代沉底。如下图所示:

图片 1

那正是说前几天根本和贵族一同学学怎么着将页脚固定在页面包车型客车尾部?

 

方法一:

先是大家来看率先种方法,这种艺术是来源于于Matthew James Taylor的《How to keep footers at the bottom of the page》。上边大家就协同来看看Matthew James Taylor介绍的主意。

HTML Markup

XHTML

<div id="container"> <div id="header">Header Section</div> <div id="page" class="clearfix"> 页面容容部分 </div> <div id="footer">Footer Section</div> </div>

1
2
3
4
5
6
7
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
页面容容部分
</div>
<div id="footer">Footer Section</div>
</div>

事实上大家得以在div#page增加所需的故事情节结构,如下所示:

JavaScript

<div id="container"> <div id="header">Header Section</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 id="footer">Footer Section</div> </div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</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 id="footer">Footer Section</div>
</div>

的确来讲,实现那页脚永久恒久在页面包车型地铁最底层,咱们只要求多个div,此中div#container是二个容器,在此个容器之中,我们包涵了div#header(头部),div#page(页面主体部分,大家能够在这里个div中追加更加多的div结构,如下面的代码所示卡塔 尔(阿拉伯语:قطر‎,div#footer(页脚部分卡塔 尔(阿拉伯语:قطر‎

CSS Code

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;/*等于footer的高度*/ } #footer { position: absolute; bottom: 0; width: 100%; height: 60px;/*脚部的可观*/ background: #6cf; clear:both; } /*=======主体内容部分=======*/ #left { width: 220px; float: left; margin-right: 20px; background: lime; } #content { background: orange; float: left; width: 480px; margin-right: 20px; } #right{ background: green; float: right; width: 220px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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;/*等于footer的高度*/
}
#footer {
position:
absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/ background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}

上面大家协同来拜望这种艺术的兑现原理:

1. <html>和<body>标签:html和body标签中必得定将中度(height)设置为“百分之百”,那样大家就能够在容器上设置比例高度,同有时间供给将html,body的margin和padding都移除,也正是html,body的margin和padding都为0;

2. div#container容器:div#container容器必须设置四个微细中度(min-height)为100%;那第生机勃勃使她在内容非常少(或从不内容卡塔尔境况下,能保持100%的莫斯中国科学技术大学学,不过在IE6是不扶持min-height的,所以为了宽容IE6,大家必要对min-height做一定的合作管理,具体能够看前面包车型地铁代码,也许阅读Min-Height Fast Hack打探什么化解min-height在Ie6下的bug难点。其余我们还亟需在div#container容器中设置二个”position:relative”以造福里面包车型地铁因素举行相对定位后不会跑了div#container容器;

3. div#page容器:div#page那几个容器有二个很关键的设置,要求在此个容器上设置二个padding-bottom值,并且以此值要等于(或略大于卡塔 尔(英语:State of Qatar)页脚div#footer的莫斯中国科学技术大学学(height卡塔 尔(阿拉伯语:قطر‎值,当然你在div#page中能够运用border-bottom人水-width来顶替padding-bottom,但有点内需在意,此处你绝对不可能使用margin-bottom来代替padding-bottom,否则会不可能兑现效果与利益

4. div#footer容器:div#footer容器必需安装多少个牢固中度,单位能够是px(或em)。div#footer还索要开展相对定位,并且安装bottom:0;让div#footer固定在容器div#container的最底层,那样就可以达成大家前面所说的机能,当内容唯有某个时,div#footer固定在显示屏的底部(因为div#container设置了一个min-height:百分百卡塔 尔(英语:State of Qatar),当内容惊人超过荧屏的惊人,div#footer也牢固在div#container尾巴部分,也正是平素在页面包车型大巴底层。您也能够给div#footer加设二个”width:百分之百”,让她在总体页面上得到延伸;

5. 其他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的莫斯中国科学技术大学学,手艺健康运营。

地点正是Matthew James Taylor介绍的怎么达成页脚永恒永久在页面包车型客车底层,如若大家感兴趣能够翻阅原文,也得以直接点击这里查看Demo。

 

Web页面的“footer”部分随着飘上来,处在页面包车型客车半腰中间,给视觉效果带给宏大的熏陶,让您的页面看上去很倒霉看,极其是当今宽屏更加多,这种光景尤为广大,本文将介绍两种缓慢解决方案,要求通晓的朋友能够参谋下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
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;
}

Sticky Footer (让页脚恒久停靠在页面尾巴部分,并不是依靠相对地点),stickyfooter

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
* {
margin:0;
padding:0;
如何将页脚固定在页面尾部,footer标签css达成位于页面底部固定。}
html,body, #wrap
{
height: 100%;
}
body > #wrap
{
height: auto;
min-height: 100%;
}
#main
{
padding-bottom: 150px;
} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
border-color:1px solid red;
background:red;
}
/* CLEAR FIX*/
.clearfix:after
{content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;
}
/* Hides from IE-mac */
.clearfix { height: 1%;/*zoom:1*/
}

</style>
</head>
<body>
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer"> sagsdhgdf
</div>
</body>
</html>
您会开采,页脚的惊人在这里边被重复使用了一遍,那是最主要的,并且四个惊人必须采取同样的值。wrap <div>的height属性把温馨拉伸至窗口全体冲天的尺寸,负的margin会把footer升高到main <div>的padding的岗位上去,因为main已经在wrap的内部,所以main的padding已是wrap 百分百惊人的大器晚成有的。 那样,footer就留在页面包车型地铁底层了。

这两天还不算落成,大家还亟需去clearfix main <div>。
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}

Footer (让页脚永恒停靠在页面尾部,而不是依照相对地点),stickyfooter !doctype html html head meta charset="UTF-8" meta name="Author" content="胡超" tit...

方法二:

这种办法是运用footer的margin-top负值来兑现footer长久永久在页面的平底效果,上面大家实际看是何等落实的。

HTML Markup

XHTML

<div id="container"> <div id="page">Main Content</div> </div> <div id="footer">footer</div>

1
2
3
4
<div id="container">
<div id="page">Main Content</div>
</div>
<div id="footer">footer</div>

地点的代码是最中央的HTML Code,同临时候您也发掘了div#footer和div#container是同辈关系,不像方法大器晚成,div#footer在div#container容器内部。当然你也得以依据你的内需把内容充实在div#container容器中,如:四个三列布局,并且还富含header部分,请看上边包车型地铁代码:

XHTML

<div id="container"> <div id="header">Header Section</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 section</div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</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 section</div>

CSS Code

CSS

html, body { height: 100%; margin: 0; padding: 0; } #container { min-height: 100%; height: auto !important; height: 100%; } #page { padding-bottom: 60px;/*中度等于footer的中度*/ } #footer { position: relative; margin-top: -60px;/*等于footer的高度*/ height: 60px; clear:both; background: #c6f; } /*==========其他div==========*/ #header { padding: 10px; background: lime; } #left { width: 18%; float: left; margin-right: 2%; background: orange; } #content{ width: 60%; float: left; margin-right: 2%; background: green; } #right { width: 18%; float: left; background: yellow; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
html,
body {
height: 100%;
margin: 0;
padding: 0;
}  
 
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px;/*等于footer的高度*/
height: 60px;
clear:both;
background: #c6f;
}
/*==========其他div==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}

措施后生可畏和措施二有几点是完全相近的,例如说方法一中的1-3三点,在章程二中都相近,换句话说,方法二中也要求把html,body高度设置为百分之百,一碗水端平置margin,padding为0;其二div#container也亟需设置min-height:百分之百,并拍卖好IE6下的min-height宽容难点;其三也急需在div#page容器上设置三个padding-bottom或border-bottom-width值等于div#footer高度值(或略大于卡塔尔。那么二种方法分歧的地方是:

1. div#footer放在div#container容器外面,相当于说两个是同级关系,假令你有新因素要求停放在与div#container容器同级,那您要求将此因素举办相对定位,不然将会破坏div#container容器的min-height值;

2. div#footer进行margin-top的负值设置,何况此值等于div#footer的高度值,并且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。

优点:

结构轻便清晰,无需js和别的hack能贯彻各浏览器下的分外。

缺点:

要给footer设置固定值,因而不能够让footer部分自适应高度。

大家只要对这种方式感兴趣,你也能够浏览一下《CSS Sticky Footer》和《Pure Css Sticky Footer》,也许直接点击Demo翻看其源代码。

 

 

#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/
}

方法三:

贯彻在页脚永世恒久在页面尾巴部分的方法有广大,可是有无数格局是供给选择部分hack或依据javaScrip来兑现,那么接下去要说的方法三,仅仅使用了15行的样式代码和三个老妪能解的HTML结构完成了成效,而且包容性强,别的没多少说,先看代码。

HTML Code

XHTML

<div id="container"> <div id="page">Your Website content here.</div> <div class="push"><!-- not have any content --></div> </div> <div id="footer">Footer Section</div>

1
2
3
4
5
<div id="container">
<div id="page">Your Website content here.</div>
<div class="push"><!-- not have any content --></div>
</div>
<div id="footer">Footer Section</div>

上边是最基本的HTML 马克up,当然你也能够拉长新的内容,可是有一点亟待注意万大器晚成您在div#container和div#footer容器外增添内容的话,新加进徕的要素要求开展相对定位。如如说你能够在div#container容器中增加你页面所需的因素

HTML Code

XHTML

<div id="container"> <div id="header">Header Section</div> <div id="page" class="clearfix"> <div id="left">Left sidebar</div> <div id="content">Main Content</div> <div id="right">Right Content</div> </div> <div class="push"><!-- not put anything here --> </div> </div> <div id="footer">Footer Section</div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div> <div class="push"><!-- not put anything here -->
</div>
</div> <div id="footer">Footer Section</div>

CSS Code

CSS

html, body{ height: 100%; margin:0; padding:0; } #container { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px;/*margin-bottom的负值等于footer中度*/ } .push, #footer { height: 60px; clear:both; } /*==========其他div效果==========*/ #header { padding: 10px; background: lime; } #left { width: 18%; float: left; margin-right: 2%; background: orange; } #content{ width: 60%; float: left; margin-right: 2%; background: green; } #right { width: 18%; float: left; background: yellow; } #footer { background: #f6c; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
} .push,
#footer {
height: 60px;
clear:both;
}
/*==========其他div效果==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}
#footer {
background: #f6c;
}

前边边二种方法相相比,方法三更左近于艺术二,他们都将div#footer放在div#container容器之外,况且那些大意在div#container容器中还扩张了二个div.push用来把div#footer推下去,上边大家就一起看看这种艺术是怎么贯彻页脚长久永远在页面底部的。

1. <html>和<body>标签:html,body标签和前二种方法相通,需求安装“height:百分百”相提并论置“margin”和“padding”为0;

2. div#container:措施三要害部分就在于div#container的设置,首先必要安装其最小高度(min-height卡塔 尔(阿拉伯语:قطر‎为100%,为了能合作好IE6,须要对min-height实行宽容管理(具体处理措施看眼下或代码卡塔尔国其余这里还应该有叁个关键点在div#container容器上急需设置三个margin-bottom,况且给其取负值,何况值的分寸相等div#footer和div.push的高度,如果div#footer和div.push设置了padding和border值,那么div#container的margin-bottom负值必要加上div#footer和div.push的padding和border值。相当于说“div#container{margin-bottom:-[div#footer的height padding border]或者-[div.push的height padding border]}”。简单的讲:div#container的margin-bottom负值要求和div#footer甚至div.push的中度大器晚成致(假使有padding或border时,中度值须求丰硕她们卡塔 尔(英语:State of Qatar)

3. div.push:在div.push中大家不应该放置任何内容,何况以此div必须放置在div#container容器中,何况是最尾部,并且供给设置其高度值等于div#footer的值,最佳增进clear:both来消亡浮动。div.push容器在那地所起的职能正是将footer往下推。

4. div#footer容器:div#footer容器和方式二同大器晚成,无法放手div#container内部,而和div#container容器同级,若是急需设置成分和footer之间的区间,最棒使用padding来代替margin值。

优点:

老妪能解,易于掌握,包容全体浏览器。

缺点:

比起前边的二种艺术,多利用了八个div.push容器,同样此情势约束了footer部分可观,不可能到达自适应高度效果。

设若我们对章程三想询问越来越多能够点击这里要么直接从DEMO中下载代码自身商量一下。

 

用作三个页面仔你早晚遇到过:当叁个HTML页面中包含少之又少的剧情时,Web页面包车型客车“footer”部分随着飘上来,处在页面包车型大巴半腰中间,给视觉效果带给庞大的影响,让您的页面看上去非常不佳看,特别是前几天宽屏更加的多,这种景况更是广大。那么怎样将Web页面包车型客车“footer”部分恒久恒久在页面的最底层呢?先来看下上面包车型大巴代码吧
那是首先种方案,前面还恐怕有两种
HTML代码

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的莫斯中国科学技术大学学*/
background: #6cf;
clear:both;
}

方法四:

日前二种艺术大家都无需其余javaScript或jQuery的提携,让大家落到实处了页脚永恒永久在页面尾巴部分的效果与利益,前边二种办法即便尚无行使jQuery等协理,但大家都相当增添了HTML标签来兑现效果与利益。假如您省略了这么些HTML标签,再要得以完毕效果与利益就相比较辛劳了,那么那个时候接纳jQuery或javaScript方法来扶植完毕是意气风发种很好的艺术,上面我们就一路来看第多种方式,通过jQuery来兑现页脚恒久永世在页面底部的效用。

HTML Markup

CSS

<div id="header">Header Section</div> <div id="page" class="clearfix"> <div id="left">Left sidebar</div> <div id="content">Main Content</div> <div id="right">Right Content</div> </div> <div id="footer">Footer Section</div>

1
2
3
4
5
6
7
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div>
<div id="footer">Footer Section</div>

此地大家并未有扩展没用的HTML标签,那个时候您也足以随即在body中加进内容,只要确保div#footer是在body最后面

XHTML

. . . <div id="footer">Footer Section</div>

1
2
3
4
.
.
.
<div id="footer">Footer Section</div>

CSS Code

CSS

*{margin: 0;padding:0;} .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { zoom:1; /* IE <8 */ } #footer{ height: 60px; background: #fc6; width: 100%; } /*==========其他div==========*/ #header { padding: 10px; background: lime; } #left { width: 18%; float: left; margin-right: 2%; background: orange; } #content{ width: 60%; float: left; margin-right: 2%; background: green; } #right { width: 18%; float: left; background: yellow; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
*{margin: 0;padding:0;}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* IE <8 */
}  
 
#footer{
height: 60px;
background: #fc6;
width: 100%;
}
/*==========其他div==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}

这些方法不像前面三种办法靠CSS来促成效益,这里只必要按日常的体制须要写样式,然则有一点点急需极其注意在html,body中不得以设置中度height为百分之百,不然此方法不能符合规律运维,假诺您在div#footer中设置了多少个惊人并把宽度设置为百分之百将特别百无一失了。

jQuery Code

JavaScript

<script type="text/javascript"> // Window load event used just in case window height is dependant upon images $(window).bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); //定义position Footer function function positionFooter() { //取到div#footer高度 footerHeight = $footer.height(); //div#footer离荧屏最上端的离开 footerTop = ( $(window).scrollTop() $(window).height()-footerHeight) "px"; /* DEBUGGING STUFF console.log("Document height: ", $(document.body).height()); console.log("Window height: ", $(window).height()); console.log("Window scroll: ", $(window).scrollTop()); console.log("Footer height: ", footerHeight); console.log("Footer top: ", footerTop); console.log("-----------") */ //假设页面内容中度小于显示器中度,div#footer将相对定位到显示屏底边,不然div#footer保留它的健康静态定位 if ( ($(document.body).height() footerHeight) < $(window).height()) { $footer.css({ position: "absolute" }).stop().animate({ top: footerTop }); } else { $footer.css({ position: "static" }); } } $(window).scroll(positionFooter).resize(positionFooter); }); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript">
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
//定义position Footer function
function positionFooter() {
//取到div#footer高度
footerHeight = $footer.height();
//div#footer离屏幕顶部的距离
footerTop = ( $(window).scrollTop() $(window).height()-footerHeight) "px";
/* DEBUGGING STUFF
console.log("Document height: ", $(document.body).height());
console.log("Window height: ", $(window).height());
console.log("Window scroll: ", $(window).scrollTop());
console.log("Footer height: ", footerHeight);
console.log("Footer top: ", footerTop); console.log("-----------")
*/
//如果页面内容高度小于屏幕高度,div#footer将绝对定位到屏幕底部,否则div#footer保留它的正常静态定位
if ( ($(document.body).height() footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).stop().animate({
top: footerTop
});
} else {
$footer.css({
position: "static"
});
}
}
$(window).scroll(positionFooter).resize(positionFooter);
});
</script>

使用方面包车型大巴jQuery代码,能够轻巧的帮大家兑现页脚永久永远在页面尾部,使用这种方法有多少个地点须求专心

1. 承保符合规律引进了jQuery版本库,并平常调入了地点这段jQuery代码;

2. 确保<div id=”footer”>是在body中最后;

3. 保障在html,body中从未安装中度为百分百。

优点:

结构轻松,没有必要附加无用标签,宽容全体浏览器,不用其它写特别样式。页脚能够不定点中度。

缺点:

在不扶助js的浏览器中不能够符合规律展现,此外每一次更换浏览器大小会闪动一下。

前几日非常重要和大家风流倜傥道钻探和学习了各类格局,用来完毕Web页面脚部永恒恒久在页面包车型客车底,这里在着得说理解一下,是页脚永久永世在页面包车型大巴平底,并不是永远恒久在浏览器窗口的后面部分,换句话说,就说当页面主内容从未显得显示器高时,页脚固定在显示器荧屏的最底层,但当页面内容超越显示屏显示器中度时,页脚又会尾随故事情节往下沉,但页脚都恒久恒久在页的尾部。前面三种都以纯CSS落成,最终风流罗曼蒂克种接收的是jQuery方法实现,各个办法各自有各自的利害,我们使用时能够依据自个儿的急需来决定,希望那篇散文能给大家带给一定的支持。倘若大家有越来越好的主意,希望能和自己壹头享用,倘令你愿意,能够直接给自己留言,作者会一直和您在一同,一起学学和商酌那方面包车型大巴知识。

赞 7 收藏 1 评论

图片 2

复制代码

</style>
</head>
<body>
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">

代码如下:

</div>
<div id="footer">Footer Section</div>
</div>
</body>
</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)设置为“百分之百”,那样我们就足以在容器上安装比例莫斯中国科学技术大学学,同时要求将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:百分百卡塔尔,当内容中度超越荧屏的冲天,div#footer也稳固在div#container尾部,也等于恒久在页面包车型大巴最底层。你也得以给div#footer加设一个”width:百分之百”,让他在全部页面上得到延伸;
其他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="header">header</div>

<div id="container">
<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中度设置为百分之百,因人而异置margin,padding为0;其二div#container也亟需安装min-height:百分之百,并管理好IE6下的min-height宽容难题;其三也须求在div#page容器上安装三个padding-bottom或border-bottom-width值等于div#footer高度值(或略大于卡塔 尔(英语:State of Qatar)。那么三种艺术分化之处是:
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部分自适应中度。 

本文由星彩网app下载发布于前端技术,转载请注明出处:如何将页脚固定在页面尾部,footer标签css达成位

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。