怎样将页脚固定不动在网页页面底部(多种多样方

日期:2021-03-21 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

做为1个Web的前端开发攻城师,在制做网页页面实际效果时毫无疑问有碰到下面这类状况:当1个HTML网页页面中含有较少的內容时,Web网页页面的“footer”一部分伴随着飘上来,处在网页页面的半腰正中间,给视觉效果实际效果带来巨大的危害,让你的网页页面看上去很不太好看,非常是如今宽屏愈来愈多,这类状况更是普遍。那末怎样将Web网页页面的“footer”一部分始终固定不动在网页页面的底部呢?留意了这里所说的是页脚footer始终固定不动在网页页面的底部,而并不是始终固定不动在显示信息器显示屏的底部,换句话说,便是当內容仅有1点点时,Web网页页面显示信息在访问器底部,当內容高宽比超出访问器高宽比时,Web网页页面的footer一部分在网页页面的底部,总而言之Web网页页面的footer一部分始终在网页页面的底部,换句说,Footer一部分始终沉底。以下图所示:

那末今日关键和大伙儿1起学习培训怎样将页脚固定不动在网页页面的底部?
方式1
最先大家看来第1种方式,这类方式是来自于Matthew James Taylor的《How to keep footers at the bottom of the page》。下面大家就1起看来看Matthew James Taylor详细介绍的方式。
HTML Markup

拷贝编码
编码以下:

<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
网页页面容容一部分
</div>
<div id="footer">Footer Section</div>
</div>

实际上大家能够在div#page提升所需的內容构造,以下所示:

拷贝编码
编码以下:

<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>

真实来讲,完成这页脚始终固定不动在网页页面的底部,大家只必须4个div,在其中div#container是1个器皿,在这个器皿当中,大家包括了div#header(头顶部),div#page(网页页面行为主体一部分,大家能够在这个div中提升更多的div构造,如上面的编码所示),div#footer(页脚一部分)

CSS Code

拷贝编码
编码以下:

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起看来看这类方式的完成基本原理
1.<html>和<body>标识:html和body标识中务必将高宽比(height)设定为“100%”,这样大家便可以在器皿上设定百分比高宽比,另外必须将html,body的margin和padding都移除,也便是html,body的margin和padding都为0;
2.div#container器皿:div#container器皿务必设定1个最少高宽比(min-height)为100%;这关键使他在內容非常少(或沒有內容)状况下,能维持100%的高宽比,但是在IE6是不适用min-height的,因此以便适配IE6,大家必须对min-height做1定的适配解决,实际能够看前面的编码,或阅读文章Min-Height Fast Hack掌握怎样处理min-height在Ie6下的bug难题。此外大家还必须在div#container器皿中设定1个"position:relative"便于于里边的元素开展肯定精准定位后不容易跑了div#container器皿;
3.div#page器皿:div#page这个器皿有1个很重要的设定,必须在这个器皿上设定1个padding-bottom值,并且这个值要等于(或略超过)页脚div#footer的高宽比(height)值,自然你在div#page中可使用border-bottom人水-width来取代padding-bottom,但有1点必须留意,此处你干万不可以应用margin-bottom来替代padding-bottom,要不然会没法完成实际效果;
4.div#footer器皿:div#footer器皿务必设定1个固定不动高宽比,企业能够是px(或em)。div#footer还必须开展肯定精准定位,而且设定bottom:0;让div#footer固定不动在器皿div#container的底部,这样便可以完成大家前面所说的实际效果,当內容仅有1点时,div#footer固定不动在显示屏的底部(由于div#container设定了1个min-height:100%),当內容高宽比超出显示屏的高宽比,div#footer也固定不动在div#container底部,也便是固定不动在网页页面的底部。你还可以给div#footer加设1个"width:100%",让他在全部网页页面上获得拓宽;
5.别的div:至于别的器皿能够依据自身要求开展设定,例如说前面的div#header,div#left,div#content,div#right等。
优势
构造简易清楚,不用js和任何hack能完成各访问器下的适配,而且也融入iphone。
缺陷
不够的地方便是必须给div#footer器皿设定1个固定不动高宽比,这个高宽比能够依据你的要求开展设定,其企业能够是px还可以是em,并且还必须将div#page器皿的padding-bottom(或border-bottom-width)设定尺寸等于(或略超过)div#footer的高宽比,才可以一切正常运作。
上面便是Matthew James Taylor详细介绍的怎样完成页脚始终固定不动在网页页面的底部,假如大伙儿感兴趣爱好能够阅读文章原文,还可以立即点一下这里查询Demo。
方式2
这类方式是运用footer的margin-top负值来完成footer始终固定不动在网页页面的底部实际效果,下面大家实际看是怎样完成的。
HTML Markup

拷贝编码
编码以下:

<div id="container">
<div id="page">Main Content</div>
</div>
<div id="footer">footer</div>

上面的编码是最基础的HTML Code,另外你也发现了div#footer和div#container是同辈关联,不像方式1,div#footer在div#container器皿內部。自然你还可以依据你的必须把內容提升在div#container器皿中,如:1个3列合理布局,并且还带有header一部分,请看下面的编码:

拷贝编码
编码以下:

<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

拷贝编码
编码以下:

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: ⑹0px;/*等于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有几点是彻底同样的,例如说方式1中的1⑶3点,在方式2中都1样,换句话说,方式2中也必须把html,body高宽比设定为100%,并重设margin,padding为0;其2div#container也必须设定min-height:100%,并解决好IE6下的min-height适配难题;其3也必须在div#page器皿上设定1个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一部分自融入高宽比。
大伙儿如果对这类方式感兴趣爱好,你还可以访问1下《CSS Sticky Footer》和《Pure Css Sticky Footer》,或立即点一下Demo查询其源码。
方式3
完成在页脚始终固定不动在网页页面底部的方式有许多,可是有许多方式是必须应用1些hack或依靠javaScrip来完成,那末接下来要说的方式3,仅仅应用了15行的款式编码和1个简易明了的HTML构造完成了实际效果,而且适配性强,其他很少说,先看编码。
HTML Code

拷贝编码
编码以下:

<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 Markup,自然你还可以再加新的內容,但是有1点必须留意假如你在div#container和div#footer器皿外提升內容的话,新加进徕的元素必须开展肯定精准定位。如如说你能够在div#container器皿中再加你网页页面所需的元素
HTML Code

拷贝编码
编码以下:

<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

拷贝编码
编码以下:

html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ⑹0px;/*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;
}

跟前面两种方式相较为,方式3更相近于方式2,她们都将div#footer放在div#container器皿以外,并且这个方式在div#container器皿中还提升了1个div.push用来把div#footer推下去,下面大家就1起看看这类方式是如何完成页脚始终固定不动在网页页面底部的。

1.<html>和<body>标识:html,body标识和前两种方式1样,必须设定“height:100%”并重设“margin”和“padding”为0;
2.div#container:方式3重要一部分就在于div#container的设定,最先必须设定其最少高宽比(min-height)为100%,以便能适配好IE6,必须对min-height开展适配解决(实际解决方式看前面或编码)此外这里也有1个重要点在div#container器皿上必须设定1个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]}”。1句话来讲:div#container的margin-bottom负值必须和div#footer和div.push的高宽比1致(假如有padding或border时,高宽比值必须再加她们);
3.div.push:在div.push中大家不可该置放任何內容,并且这个div务必置放在div#container器皿中,并且是最底部,而且必须设定其高宽比值等于div#footer的值,最好是再加clear:both来消除波动。div.push器皿在此场所起的功效便是将footer往下推。
4.div#footer器皿:div#footer器皿和方式21样,不可以放到div#container內部,而和div#container器皿同级,假如必须设定元素和footer之间的间隔,最好是应用padding来替代margin值。
优势:
简易明了,易于了解,适配全部访问器。
缺陷:
较以前面的两种方式,多应用了1个div.push器皿,一样此方式限定了footer一部分高宽比,没法做到自融入高宽比实际效果。
假如大伙儿对方式3想掌握更多能够点一下这里或立即从DEMO中免费下载编码自身科学研究1下。
方式4
前面3种方式大家都不必须任何javaScript或jQuery的协助,让大家完成了页脚始终固定不动在网页页面底部的实际效果,前面3种方式尽管沒有应用jQuery等协助,但大家都附加提升了HTML标识来完成实际效果。假如你省略了这些HTML标识,再要完成实际效果就较为艰难了,那末此时应用jQuery或javaScript方式来协助完成是1种很好的方法,下面大家就1起看来第4种方式,根据jQuery来完成页脚始终固定不动在网页页面底部的实际效果。
HTML Markup

拷贝编码
编码以下:

<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最终面。

拷贝编码
编码以下:

<div id="footer">Footer Section</div>

CSS Code

拷贝编码
编码以下:

*{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;
}

这个方式不像前面3种方式靠CSS来完成实际效果,这里只必须按一切正常的款式要求写款式,但是有1点必须非常留意在html,body中不能以设定高宽比height为100%,不然此方式没法一切正常运作,假如你在div#footer中设定了1个高宽比并把宽度设定为100%将更是万无1失了。
jQuery Code

拷贝编码
编码以下:

<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();
//界定positionFooter 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的访问器中没法一切正常显示信息,此外每次更改访问器尺寸会闪烁1下。
今日关键和大伙儿1起讨论和学习培训了4种方式,用来完成Web网页页面脚部始终固定不动在网页页面的底,这里在着得说清晰1下,是页脚始终固定不动在网页页面的底部,而并不是始终固定不动在访问器对话框的底部,换句话说,就说当网页页面主內容沒有显示信息显示屏高时,页脚固定不动在显示信息器显示屏的底部,但当网页页面內容超出显示信息器显示屏高宽比时,页脚又会追随內容往下沉,但页脚都始终固定不动在页的底部。前面3种全是纯CSS完成,最终1种选用的是jQuery方式完成,4种方式都有各的利与弊,大伙儿应用时能够依据自身的要求来决定,期待这篇文章内容能给大伙儿带来1定的协助。假如大伙儿有更好的方式,期待能和我1起共享,假如您想要,能够立即给我留言,我会1直和您在1起,1起学习培训和探讨这层面的专业知识。