让页脚永远停靠在页面底部,页面不够长怎么确
分类:前端技术

怎么将页脚固定在页面尾巴部分

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结构,如下边包车型客车代码所示卡塔 尔(英语:State of Qatar),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值,而且这几个值要等于(或略大于卡塔 尔(阿拉伯语:قطر‎页脚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卡塔 尔(英语:State of Qatar)设置大小相等(或略大于卡塔 尔(阿拉伯语:قطر‎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;
}
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时,中度值要求增添他们卡塔 尔(阿拉伯语:قطر‎

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卡塔 尔(英语:State of Qatar)值,当然你在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高度值(或略大于卡塔尔国。那么二种艺术分裂之处是:
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部分自适应中度。 

本文由pc28.am发布于前端技术,转载请注明出处:让页脚永远停靠在页面底部,页面不够长怎么确

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文