快捷搜索:
来自 新京葡娱乐场网址 2019-10-07 00:39 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

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值,而且那几个值要等于(或略大于)页脚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。

 

Web页面包车型大巴“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查看其源代码。

 

 

方法三:

达成在页脚永恒永远在页面后面部分的法子有不菲,但是有成都百货上千办法是亟需利用部分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代码

方法四:

眼前三种方式我们都无需其余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中未有安装中度为100%。

优点:

结构轻巧,没有须要附加无用标签,宽容全部浏览器,不用别的写非常样式。页脚能够不定点中度。

缺点:

在不扶助js的浏览器中不能够平常显示,其他每回退换浏览器大小会闪动一下。

明日重要和大家齐声钻探和学习了多种格局,用来兑现Web页面脚部永世永远在页面包车型客车底,这里在着得说驾驭一下,是页脚永久长久在页面包车型大巴最底层,并非永恒永世在浏览器窗口的平底,换句话说,就说当页面主内容未有荧屏幕高时,页脚固定在显示屏荧屏的底层,但当页面内容超越显示器显示器中度时,页脚又会跟随剧情往下沉,但页脚都永久永世在页的平底。前边三种都是纯CSS完成,最终一种接纳的是jQuery方法达成,三种格局各自有各自的利弊,我们使用时能够依据本人的需要来决定,希望那篇小说能给大家带来一定的佑助。假如大家有更加好的艺术,希望能和自身联合享用,假如你愿意,能够一贯给本身留言,小编会一贯和你在一块,一齐上学和争辨那地点的文化。

赞 7 收藏 1 评论

图片 2

复制代码

代码如下:

<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,不然会无法落到实处际效果果与利益;

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:footer标签css实现位于页面底部固定,如何将页脚

关键词: