CSS七种格局贯彻Footer置底,怎样将页脚固定在页面底部

Sticky Footer,完美的断然尾部

2017/04/14 · CSS · 1
评论 ·
footer

CSS七种格局贯彻Footer置底,怎样将页脚固定在页面底部。原稿出处:
坑坑洼洼实验室   

页脚置底(Sticky
footer)就是让网页的footer部分始终在浏览器窗口的底层。

什么样将页脚固定在页面尾部

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)设置为“100%”,那样大家就足以在容器上安装比例冲天,同时需求将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:100%),当内容中度当先屏幕的莫大,div#footer也一定在div#container底部,约等于稳定在页面的平底。您也得以给div#footer加设一个”width:100%”,让她在整个页面上获取延伸;

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。

 

写在前方

做过网页开发的同校只怕都赶上过如此难堪的排版难题:
在焦点内容不丰硕多依然未完全加载出来从前,就会导致现身(图一)的这种情状,原因是因为没有丰硕的垂直空间使得页脚推到浏览器窗口最底部。不过,大家意在的成效是页脚应该直接处于页面最底部(如图二): 

 亚洲必赢官网 2

笔者眼下在项目中也蒙受过如此的气象,在摸索最佳消除方案的经过中,明白到了
“Sticky Footer” 这一个名词。
本文将带大家重新认识那几个广阔的网页效果,以及一些实惠的达成方案。

写在前头

做过网页开发的同桌或然都赶上过如此狼狈的排版难点:
在主导内容不充分多可能未完全加载出来在此之前,就会造成出现(图一)的那种情景,原因是因为没有丰硕的垂直空间使得页脚推到浏览器窗口最尾部。不过,大家期望的法力是页脚应该一直处在页面最底部(如图二):

亚洲必赢官网 3

小编如今在类型中也碰着过那样的情形,在检索最佳化解方案的进程中,驾驭到了
“Sticky Footer” 那个名词。
正文将带我们重新认识那一个广阔的网页效果,以及一些卓有功效的落到实处方案。

当网页内容丰盛长以至超出浏览器可视高度时,页脚会随着故事情节被推到网页底部;但如果网页内容不够长,置底的页脚就会维持在浏览器窗口尾部。

方法二:

那种格局是利用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中度设置为100%,同仁一视置margin,padding为0;其二div#container也亟需设置min-height:100%,并处理好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亚洲必赢官网,查看其源代码。

 

什么是 “Sticky Footer”

所谓 “Sticky
Footer”,并不是什么新的前端概念和技能,它指的就是一种网页效果:
若是页面内容不充足长时,页脚固定在浏览器窗口的最底层;若是故事情节丰富长时,页脚固定在页面的最头部。
总而言之,就是页脚平昔处于最底,效果大概如图所示:

亚洲必赢官网 4

 

自然,完成那种意义的办法有许二种,其中有经过脚本计算的,有通过 CSS
处理的,脚本计算的方案我们不在本文探究。
上边咱们看看有何通过 CSS
可以兑现且适用于活动端支付的方案,并分析内部的得失。

什么是 “Sticky Footer”

所谓 “Sticky
Footer”,并不是何许新的前端概念和技巧,它指的就是一种网页效果:
借使页面内容不充足长时,页脚固定在浏览器窗口的底部;如果情节充分长时,页脚固定在页面的最底部。
总的说来,就是页脚一向处于最底,效果大概如图所示:

亚洲必赢官网 5

当然,完成这种效益的措施有好种种,其中有通过脚本计算的,有通过 CSS
处理的,脚本总结的方案我们不在本文探讨。
下边我们看看有什么样通过 CSS
可以完成且适用于活动端支付的方案,并分析内部的利害。

落实格局

方法三:

贯彻在页脚永远永恒在页面底部的法子有众多,但是有那一个方法是索要利用一些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:100%”同仁一视置“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 结构是如此:

1 <div class="wrapper">
2     <div class="content"><!-- 页面主体内容区域 --></div>
3     <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
4 </div>

什么样完毕

设若我们页面的 HTML 结构是这么:

XHTML

<div class=”wrapper”> <div class=”content”><!–
页面主体内容区域 –></div> <div class=”footer”><!–
须要做到 Sticky Footer 效果的页脚 –></div> </div>

1
2
3
4
<div class="wrapper">
    <div class="content"><!– 页面主体内容区域 –></div>
    <div class="footer"><!– 需要做到 Sticky Footer 效果的页脚 –></div>
</div>
  1. 将内容部分的尾部外边距设为负数

方法四:

目前二种艺术我们都不须要其它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为100%,否则此办法不能正常运行,倘使你在div#footer中设置了一个莫大并把宽度设置为100%将尤为万无一失了。

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中没有设置高度为100%。

优点:

布局不难,无需附加无用标签,包容所有浏览器,不用别的写尤其样式。页脚可以不稳定中度。

缺点:

在不接济js的浏览器中不能正常突显,此外每便变更浏览器大小会闪动一下。

今天重点和豪门一同探索和读书了五种办法,用来促成Web页面脚部永远永恒在页面的底,那里在着得说领悟一下,是页脚永远永恒在页面的尾部,而不是永恒永恒在浏览器窗口的底层,换句话说,就说当页面主内容尚未展现屏幕高时,页脚固定在屏幕显示器的平底,但当页面内容超过屏幕屏幕中度时,页脚又会尾随情节往下沉,但页脚都永远永恒在页的最底层。前边三种都以纯CSS完结,最终一种选拔的是jQuery方法达成,七种艺术各有各的优缺点,大家使用时可以依据自身的必要来决定,希望那篇作品能给大家带来一定的扶持。假使我们有更好的形式,希望能和自个儿一块分享,即使您愿意,可以直接给自个儿留言,笔者会直接和你在一起,一起上学和钻探那方面的知识。

赞 7 收藏 1
评论

亚洲必赢官网 6

贯彻方案一:absolute

透过相对定位处理相应是大面积的方案,只要使得页脚一贯稳定在主容器预留占位地点。

 1 html, body {
 2     height: 100%;
 3 }
 4 .wrapper {
 5     position: relative;
 6     min-height: 100%;
 7     padding-bottom: 50px;
 8     box-sizing: border-box;
 9 }
10 .footer {
11     position: absolute;
12     bottom: 0;
13     height: 50px;
14 }

以此方案需点名 html、body 100% 的莫大,且 content
的 padding-bottom 需要与 footer 的 height 一致。

贯彻方案一:absolute

因此相对定位处理相应是广泛的方案,只要使得页脚平素稳定在主容器预留占位地点。

CSS

html, body { height: 100%; } .wrapper { position: relative; min-height:
100%; padding-bottom: 50px; box-sizing: border-box; } .footer {
position: absolute; bottom: 0; height: 50px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

本条方案需点名 html、body 100% 的冲天,且 content 的 padding-bottom
需要与 footer 的 height 一致。

那是个相比较主流的用法,把内容部分最小低度设为100%,再利用内容部分的负底部外边距值来完结当中度不满时,页脚保持在窗口底部,当中度超越则跟着推出的意义。

落成方案二:calc

透过统计函数 calc 计算(视窗中度 –
页脚高度)赋予内容区最小中度,不要求任何额外样式处理,代码量最少、最简便。

1 .content {
2     min-height: calc(100vh - 50px);
3 }
4 .footer {
5     height: 50px;
6 }

只要不需考虑 calc() 以及 vh 单位的极度景况,那是个很可观的落到实处方案。
一律的问题是 footer 的中度值须要与 content 其中的计算值一致。

落到实处方案二:calc

通过总结函数 calc 计算(视窗高度 –
页脚中度)赋予内容区最小中度,不须要任何额外样式处理,代码量最少、最简单易行。

CSS

.content { min-height: calc(100vh – 50px); } .footer { height: 50px; }

1
2
3
4
5
6
.content {
    min-height: calc(100vh – 50px);
}
.footer {
    height: 50px;
}

若是不需考虑 calc() 以及 vh
单位的卓殊境况,那是个很优秀的兑现方案。
相同的题材是 footer 的高度值需求与 content 其中的统计值一致。

content

兑现方案三:table

经过 table 属性使得页面以表格的形态突显。

 1 html, body {
 2     height: 100%;
 3 }
 4 .wrapper {
 5     display: table;
 6     width: 100%;
 7     min-height: 100%;
 8 }
 9 .content {
10     display: table-row;
11     height: 100%;
12 }

亟需注意的是,使用 table 方案存在一个比较宽泛的体裁限制,寻常margin、padding、border 等属性会不相符预期。
笔者不提议选择那个方案。当然,难题也是足以消除的:别把其余样式写在 table
上。

兑现方案三:table

通过 table 属性使得页面以表格的形制彰显。

CSS

html, body { height: 100%; } .wrapper { display: table; width: 100%;
min-height: 100%; } .content { display: table-row; height: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

亟需专注的是,使用 table 方案存在一个相比较广泛的样式限制,平日margin、padding、border 等品质会不适合预期。
小编不提议利用那一个方案。当然,难点也是可以解决的:别把任何样式写在 table
上。

html,body{height:100%;margin:0;}.wrapper{min-height:100%;/*
等于footer的高度 */margin-bottom:-50px;}.footer,.push{height:50px;}

兑现方案四:Flexbox

Flexbox 是相当适合达成这种效益的,使用 Flexbox
落成不仅不须要其余附加的要素,而且允许页脚的惊人是可变的。

尽管超过半数 Flexbox
布局常用来水平方向布局,但别忘了实际上它也可用以垂直布局,所以您必要做的是将垂直部分包装在一个
Flex 容器中,并选用要推而广之的一些,他们将自动占用其容器中的所有可用空间。

 1 html {
 2     height: 100%;
 3 }
 4 body {
 5     min-height: 100%;
 6     display: flex;
 7     flex-direction: column;
 8 }
 9 .content {
10     flex: 1;
11 }

内需注意的是想要兼容各样系统装置,需求兼顾 flex 的协作写法。

多福多寿方案四:Flexbox

Flexbox 是格外适合完成那种功效的,使用 Flexbox
落成不仅不要求其他附加的要素,而且允许页脚的莫大是可变的。

即便多数 Flexbox
布局常用来水平方向布局,但别忘了实际上它也可用以垂直布局,所以你需求做的是将垂直部分包装在一个
Flex 容器中,并选拔要壮大的一对,他们将自行占用其容器中的所有可用空间。

CSS

html { height: 100%; } body { min-height: 100%; display: flex;
flex-direction: column; } .content { flex: 1; }

1
2
3
4
5
6
7
8
9
10
11
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

急需专注的是想要兼容各个系统设备,须求兼顾 flex 的非凡写法。

本条方式必要容器里有十分的占位成分(如.push)

写在最后

以上两种完成方案,我都在项目中品尝过,各个已毕的形式其实南平小异,同时也都有协调的优缺点。
里面一些方案存在限制性难题,需求稳定页脚中度;其中部分方案必要添加额外的因素大概须要Hack 手段。同学们得以依据页面具体必要,接纳最契合的方案。

 本文转自:凹凸实验室  ()

 

写在终极

上述二种完结方案,我都在品种中品尝过,逐个完结的法门其实吉安小异,同时也都有和好的利弊。
个中部分方案存在限制性难题,须求固定页脚中度;其中有的方案需求添加额外的成分只怕必要Hack 手段。同学们可以依照页面具体需求,拔取最适合的方案。

理所当然,技术是不断更新的,或者还有众多两样的、更好的方案。但相信我们最后目都以如出一辙的,为了更好的用户体验!

参考资料:

1 赞 4 收藏 1
评论

亚洲必赢官网 7

亟需专注的是.wrapper的margin-bottom值需求和.footer的负的height值保持一致,那点不太协调。

  1. 将页脚的顶部外边距设为负数

既然能在容器上应用负的margin bottom,那是还是不是利用负margin
top吗?当然可以。

给内容外增添父元素,并让内容部分的最底层内边距与页脚中度的值相等

content

html,body{height:100%;margin:0;}.content{min-height:100%;}.content-inside{padding:20px;padding-bottom:50px;}.footer{height:50px;margin-top:-50px;}

只是这种方法和上一种同等,都急需万分添加不需求的html成分。

  1. 运用calc()设置故事情节惊人

有一种情势不需求其余多余成分——使用CSS3新增的盘算函数calc()

如此那般成分间就不会有重叠发生,也不须要控制内外边距了~

content

.content{min-height:calc(100vh-70px);}.footer{height:50px;}

唯恐你会猜疑内容高度calc()中缘何减去70px,而不是footer的可观50px,因为如若俩成分有20px的间距,所以70px=50px+20px

然则,你不要在意这个~

  1. 接纳flexbox弹性盒布局

如上三种方式的footer中度都以一直的,平时来说那不利于网页布局:内容会改变,它们都是弹性的,一旦内容超过一定中度就会破坏布局。所以给footer使用flexbox吧,让它的中度可以变大变小变美丽~(≧∇≦)

content

html{height:100%;}body{min-height:100%;display:flex;flex-direction:column;}.content{flex:1;}

您还足以在地点添加header或在底下添加越来越多因素。可从以下技巧接纳其一:

flex: 1使内容(如:.content)中度可以肆意伸缩

margin-top: auto

请记住,我们有《Flexbox完整指南(英)》呢~

  1. 动用Grid网格布局

grid比flexbox还要新很多,并且更佳很简短,大家一致有《Grid完整指南(英)》奉上~

content

html{height:100%;}body{min-height:100%;display:grid;grid-template-rows:1frauto;}.footer{grid-row-start:2;grid-row-end:3;}

遗憾的是,网格布局(Grid layout)如今仅辅助Chrome Canary和Firefox
Developer Edition版本。

总结

实则页脚置底的布局遍地可知,很几人也和本身一样觉得相比较简单,但大概只知其然罢了,�偶然看到CSS-TRICKS上介绍页脚置底的作品认为不错,遂译之。

那是自家的处女译文,不足之处请多指教。

原文链接:Sticky Footer, Five
Ways

初稿小编:Chris
Coyier

译者:廖柯宇

亚洲必赢官网 8

网站地图xml地图