一应俱全的断然底部,CSS多种艺术达成Footer置底
分类:前端技术

Sticky Footer,完美的相对底部

2017/04/14 · CSS · 1 评论 · 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)设置为“百分百”,那样大家就足以在容器上设置比例中度,同期需求将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:百分百),当内容惊人超越显示屏的中度,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。

 

写在眼下

做过网页开辟的同窗只怕都凌驾过那样窘迫的排版难点:
在重视内容不丰盛多仍然未完全加载出来从前,就能够促成现身(图生龙活虎)的这种气象,原因是因为从没丰富的垂直空间使得页脚推到浏览器窗口最尾部。但是,我们盼望的效果是页脚应该一直处于页面最尾巴部分(如图二):

图片 2

小编最近在项目中也遇到过这样的景观,在寻觅最好应用方案的进程中,领会到了 “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中度设置为百分百,并重置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查阅其源代码。

 

什么是 “Sticky Footer”

所谓 “Sticky Footer”,实际不是什么样新的前端概念和技艺,它指的便是生龙活虎种网页效果:
要是页面内容不丰富长时,页脚固定在浏览器窗口的底层;如若剧情丰硕长时,页脚固定在页面包车型地铁最尾部。
综上可得,正是页脚平昔处于最底,效果大概如图所示:

图片 3

理所必然,完结这种功能的法子有不菲种,此中有经过脚本计算的,有经过 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:百分之百”比量齐观置“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 结构是那样:

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为百分之百,不然此情势不能符合规律运营,即使你在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 评论

图片 4

落到实处方案生机勃勃: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 百分之百 的万丈,且 content 的 padding-bottom 需要与 footer 的 height 一致。

那是个比较主流的用法,把内容部分最小中度设为百分之百,再接纳内容部分的负背后部非凡边距值来达到个中度不满时,页脚保持在窗口尾巴部分,个中度超越则随时推出的效劳。

福寿无疆方案二: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 属性使得页面以表格的形制表现。

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 容器中,并采用要强盛的意气风发部分,他们将自动占用其容器中的全部可用空间。

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)

写在结尾

以上两种完成方案,作者都在等级次序中尝试过,各样落成的办法其实如出豆蔻年华辙,同一时候也皆有和好的利害。
此中一些方案存在节制性难点,需求稳固页脚中度;当中部分方案供给增加额外的因素恐怕需要哈克 手腕。同学们得以依附页面具体须求,采用最相符的方案。

本来,技术是不断更新的,恐怕还可能有为数不菲不如的、更加好的方案。但相信大家最后目都以相似的,为了更加好的客户体验!

参照他事他说加以侦察资料:

1 赞 4 收藏 1 评论

图片 5

须要小心的是.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

译者:廖柯宇

图片 6

本文由pc28.am发布于前端技术,转载请注明出处:一应俱全的断然底部,CSS多种艺术达成Footer置底

上一篇:网页中选取的字体介绍,网页字体相关 下一篇:没有了
猜你喜欢
热门排行
精彩图文