【译】CSS多样方式贯彻Footer置底上海时时乐走势

完毕方案四: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 的非常写法。

而是,你不用在意那么些~

方法二:

这种办法是采纳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:百分之百,并拍卖好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查看其源代码。

 

写在终极

上述三种完成方案,小编都在品种中品尝过,各种完结的办法其实一模二样,同不经常间也都有谈得来的利弊。
里头一部分方案存在限制性难题,须要一定页脚高度;个中一些方案要求增多额外的元素可能需求哈克 手段。同学们能够依附页面具体须要,选取最符合的方案。

不容置疑,本事是不断更新的,可能还会有众多不等的、越来越好的方案。但相信我们最后目都是毫无二致的,为了越来越好的客户体验!

参谋资料:

1 赞 4 收藏 1 评论

上海时时乐走势图官网 1

以此点子须要容器里有额外的占位成分(如.push)

方法三:

落实在页脚恒久永久在页面后面部分的章程有十分的多,不过有十分多艺术是须要动用部分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中下载代码自个儿研商一下。

 

写在前方

做过网页开采的同室或许都遭受过那样难堪的排版难点:
在珍视内容不丰富多依旧未完全加载出来在此以前,就能够导致出现(图一)的这种场地,原因是因为从没丰盛的垂直空间使得页脚推到浏览器窗口最后面部分。不过,大家盼望的机能是页脚应该一直处于页面最尾部(如图二):

上海时时乐走势图官网 2

作者日前在项目中也蒙受过这么的情景,在搜寻最棒实施方案的长河中,精通到了 “Sticky Footer” 那几个名词。
本文将带大家重新认知那几个广阔的网页效果,以及一些实惠的达成方案。

content

方法四:

日前三种格局大家都无需其余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 评论

上海时时乐走势图官网 3

什么是 “Sticky Footer”

所谓 “Sticky Footer”,并不是什么样新的前端概念和技艺,它指的就是一种网页效果:
假使页面内容不丰富长时,页脚固定在浏览器窗口的底层;假设剧情丰富长时,页脚固定在页面包车型大巴最尾巴部分。
简单的讲,便是页脚一向处在最底,效果大概如图所示:

上海时时乐走势图官网 4

本来,落成这种意义的方法有不知凡三种,当中有经过脚本计算的,有经过 CSS 管理的,脚本计算的方案大家不在本文商量。
下边我们看看有啥样通过 CSS 可以兑现且适用于移动端支出的方案,并深入分析内部的得失。

唯恐你会疑心内容中度calc()中为什么减去70px,并不是footer的可观50px,因为要是俩成分有20px的距离,所以70px=50px 20px

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

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

来源:w3cplus

用作多少个Web的前端攻城师,在制作页面效果时确定有蒙受上边这种气象:当三个HTML页面中蕴涵相当少的内容时,Web页面包车型地铁“footer”部分随着飘上来,处在页面包车型客车半腰中间,给视觉效果带来非常大的震慑,让你的页面看上去比较不好看,特别是今日宽屏更加多,这种景色尤其广泛。那么如何将Web页面包车型大巴“footer”部分长久永远在页面包车型客车底层呢?

注意了此间所说的是页脚footer长久恒久在页面包车型客车平底,并非长久永世在显示屏荧屏的底层,换句话说,正是当内容唯有一丢丢时,Web页面突显在浏览器尾部,当内容惊人超越浏览器中度时,Web页面包车型地铁footer部分在页面包车型地铁最底层,简来讲之Web页面包车型客车footer部分永恒在页面包车型客车最底层,换句说,Footer部分长久沉底。如下图所示:

上海时时乐走势图官网 5

那么后天注重和豪门一齐念书怎么着将页脚固定在页面包车型大巴头部?

 

方法一:

第一大家来看率先种格局,这种方法是发源于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;
}

上边大家一起来会见这种艺术的兑现原理:

【译】CSS多样方式贯彻Footer置底上海时时乐走势图官网。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做一定的合作管理,具体能够看近来的代码,或许阅读【译】CSS多样方式贯彻Footer置底上海时时乐走势图官网。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。

 

落到实处方案二: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 当中的总结值一致。

有一种方法无需别的多余成分——使用CSS3新添的一个钱打二14个结函数calc()

什么样落实

借使大家页面包车型大巴 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>

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

Sticky Footer,完美的断然尾部

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

原稿出处: 坑坑洼洼实验室   

content

兑现方案一: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 一致。

给内容外扩展父成分,并让内容部分的后面部分内边距与页脚高度的值相等

【译】CSS多样方式贯彻Footer置底上海时时乐走势图官网。福寿双全方案三: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 上。

亟需潜心的是.wrapper的margin-bottom值需求和.footer的负的height值保持一致,这点不太和煦。

可是这种方法和上一种同等,都供给相当加多不供给的html成分。

上海时时乐走势图官网 6

  1. 将页脚的最上端外边距设为负数

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

content

margin-top: auto

那是个相比主流的用法,把内容部分最小中度设为百分之百,再采用内容部分的负尾部外边距值来实现当中度不满时,页脚保持在窗口尾部,当高度超越则随着推出的遵守。

  1. 将内容部分的底部外边距设为负数

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

content

  1. 动用flexbox弹性盒布局
  1. 选拔Grid网格布局

不满的是,网格布局(Grid layout)最近仅补助Chrome Canary和Firefox Developer Edition版本。

兑现格局

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

初稿笔者:Chris Coyier

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

content

上述三种艺术的footer中度都以定位的,平时来讲那不利于网页布局:内容会变动,它们都以弹性的,一旦内容超过一定高度就能毁掉布局。所以给footer使用flexbox吧,让它的中度能够变大变小变完美~(≧∇≦)

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

原稿链接:Sticky Footer, Five Ways

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

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

当网页内容丰盛长以致赶上浏览器可视中度时,页脚会随着剧情被推到网页尾部;但要是网页内容相当的短,置底的页脚就能维持在浏览器窗口底部。

flex: 1使内容(如:.content)中度能够恣心所欲伸缩

你仍是可以在地点增添header或在底下加多更多成分。可从以下技能选取其一:

实质上页脚置底的布局历历可知,很三个人也和本人同一感觉相比较轻巧,但大概只知其然罢了,�不时看到CSS-TRICKS上介绍页脚置底的稿子感觉不错,遂译之。

译者:廖柯宇

那般元素间就不会有重叠发生,也不须求调整内外边距了~

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

总结

  1. 采纳calc()设置剧情惊人

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

本文由上海时时乐走势图发布于web前端,转载请注明出处:【译】CSS多样方式贯彻Footer置底上海时时乐走势

您可能还会对下面的文章感兴趣: