div footer標(biāo)簽css實(shí)現(xiàn)位于頁(yè)面底部固定
發(fā)布時(shí)間:2012-12-02 12:57:14 作者:佚名
我要評(píng)論

Web頁(yè)面的“footer”部分隨著飄上來(lái),處在頁(yè)面的半腰中間,給視覺(jué)效果帶來(lái)極大的影響,讓你的頁(yè)面看上去很不好看,特別是現(xiàn)在寬屏越來(lái)越多,這種現(xiàn)象更是常見(jiàn),本文將介紹兩種解決方案,需要了解的朋友可以參考下
作為一個(gè)頁(yè)面仔你一定遇到過(guò):當(dāng)一個(gè)HTML頁(yè)面中含有較少的內(nèi)容時(shí),Web頁(yè)面的“footer”部分隨著飄上來(lái),處在頁(yè)面的半腰中間,給視覺(jué)效果帶來(lái)極大的影響,讓你的頁(yè)面看上去很不好看,特別是現(xiàn)在寬屏越來(lái)越多,這種現(xiàn)象更是常見(jiàn)。那么如何將Web頁(yè)面的“footer”部分永遠(yuǎn)固定在頁(yè)面的底部呢?先來(lái)看下下面的代碼吧
這是第一種方案,后面還有幾種
HTML代碼
復(fù)制代碼
代碼如下:<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代碼
復(fù)制代碼
代碼如下:html,body{margin:0;padding:0;height:100%}
.container{min-height:100%;height:auto !important;height:100%;/*ie6不識(shí)別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;}
實(shí)現(xiàn)這頁(yè)腳永遠(yuǎn)固定在頁(yè)面的底部,我們只需要四個(gè)div,其中div#container是一個(gè)容器,在這個(gè)容器之中,我們包含了div#header(頭部),div#page(頁(yè)面主體部分,我們可以在這個(gè)div中增加更多的div結(jié)構(gòu),如上面的代碼所示),div#footer(頁(yè)腳部分)
下面我們一起來(lái)看看這種方法的實(shí)現(xiàn)原理:
<html>和<body>標(biāo)簽:html和body標(biāo)簽中必須將高度(height)設(shè)置為“100%”,這樣我們就可以在容器上設(shè)置百分比高度,同時(shí)需要將html,body的margin和padding都移除,也就是html,body的margin和padding都為0;
div#container容器:div#container容器必須設(shè)置一個(gè)最小高度(min-height)為100%;這主要使他在內(nèi)容很少(或沒(méi)有內(nèi)容)情況下,能保持100%的高度,不過(guò)在IE6是不支持min-height的,所以為了兼容IE6,我們需要對(duì)min-height做一定的兼容處理,具體可以看前面的代碼,另外我們還需要在div#container容器中設(shè)置一個(gè)”position:relative”以便于里面的元素進(jìn)行絕對(duì)定位后不會(huì)跑了div#container容器;
div#page容器:div#page這個(gè)容器有一個(gè)很關(guān)鍵的設(shè)置,需要在這個(gè)容器上設(shè)置一個(gè)padding-bottom值,而且這個(gè)值要等于(或略大于)頁(yè)腳div#footer的高度(height)值,當(dāng)然你在div#page中可以使用border-bottom人水-width來(lái)替代padding-bottom,但有一點(diǎn)需要注意,此處你千萬(wàn)不能使用margin-bottom來(lái)代替padding-bottom,不然會(huì)無(wú)法實(shí)現(xiàn)效果;
div#footer容器:div#footer容器必須設(shè)置一個(gè)固定高度,單位可以是px(或em)。div#footer還需要進(jìn)行絕對(duì)定位,并且設(shè)置bottom:0;讓div#footer固定在容器div#container的底部,這樣就可以實(shí)現(xiàn)我們前面所說(shuō)的效果,當(dāng)內(nèi)容只有一點(diǎn)時(shí),div#footer固定在屏幕的底部(因?yàn)閐iv#container設(shè)置了一個(gè)min-height:100%),當(dāng)內(nèi)容高度超過(guò)屏幕的高度,div#footer也固定在div#container底部,也就是固定在頁(yè)面的底部。你也可以給div#footer加設(shè)一個(gè)”width:100%”,讓他在整個(gè)頁(yè)面上得到延伸;
其他div:至于其他容器可以根據(jù)自己需求進(jìn)行設(shè)置,比如說(shuō)前面的div#header,div#left,div#content,div#right等。
優(yōu)點(diǎn):
結(jié)構(gòu)簡(jiǎn)單清晰,無(wú)需js和任何hack能實(shí)現(xiàn)各瀏覽器下的兼容,并且也適應(yīng)iphone。
缺點(diǎn):
不足之處就是需要給div#footer容器設(shè)置一個(gè)固定高度,這個(gè)高度可以根據(jù)你的需求進(jìn)行設(shè)置,其單位可以是px也可以是em,而且還需要將div#page容器的padding-bottom(或border-bottom-width)設(shè)置大小等于(或略大于)div#footer的高度,才能正常運(yùn)行。
方法二:
這種方法是利用footer的margin-top負(fù)值來(lái)實(shí)現(xiàn)footer永遠(yuǎn)固定在頁(yè)面的底部效果,下面我們具體看是如何實(shí)現(xiàn)的。
HTML代碼
復(fù)制代碼
代碼如下:<div id="header">header</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</div>
CSS代碼
復(fù)制代碼
代碼如下:html,body{height:100%;margin:0;padding:0;}
#container{min-height:100%;height:auto !important;height:100%;}
#page{padding-bottom:60px;/*等于或者大于footer的高度*//*border-bottom-width:60px;邊框?qū)挾纫部梢?/}
#header{padding:10px;background:lime;}
#footer{position:relative;margin-top:-60px;/*等于footer的高度*/height:60px;clear:both;background:#c6f;}
#left{width:18%;float:left;margin-right:2%;background:orange;}
#content{width:60%;float:left;margin-right:2%;background:yellow;}
#right{width:18%;float:right;background:green;}
.clearfix:after{visibility:hidden;height:0;font-size:0;display:block;content:" ";clear:both;}
* html .clearfix{zoom:1;}/* ie6 */
*:first-child+html .clearfix{zoom:1;} /* ie7 */
上面的代碼是最基本的HTML Code,同時(shí)你也發(fā)現(xiàn)了div#footer和div#container是同輩關(guān)系,不像方法一,div#footer在div#container容器內(nèi)部。當(dāng)然你也可以根據(jù)你的需要把內(nèi)容增加在div#container容器中,如:一個(gè)三列布局,而且還帶有header部分。
方法一和方法二有幾點(diǎn)是完全相同的,比如說(shuō)方法一中的1-3三點(diǎn),在方法二中都一樣,換句話說(shuō),方法二中也需要把html,body高度設(shè)置為100%,并重置margin,padding為0;其二div#container也需要設(shè)置min-height:100%,并處理好IE6下的min-height兼容問(wèn)題;其三也需要在div#page容器上設(shè)置一個(gè)padding-bottom或border-bottom-width值等于div#footer高度值(或略大于)。那么兩種方法不同之處是:
div#footer放在div#container容器外面,也就是說(shuō)兩者是同級(jí)關(guān)系,如果你有新元素需要放置在與div#container容器同級(jí),那你需要將此元素進(jìn)行絕對(duì)定位,不然將會(huì)破壞div#container容器的min-height值;
div#footer進(jìn)行margin-top的負(fù)值設(shè)置,并且此值等于div#footer的高度值,而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。
優(yōu)點(diǎn):
結(jié)構(gòu)簡(jiǎn)單清晰,無(wú)需js和任何hack能實(shí)現(xiàn)各瀏覽器下的兼容。
缺點(diǎn):
要給footer設(shè)置固定值,因此無(wú)法讓footer部分自適應(yīng)高度。
相關(guān)文章
css實(shí)現(xiàn)背景漸變與底部固定的藍(lán)天白云示例
漸變背景的的設(shè)定:通過(guò)定義body實(shí)現(xiàn);動(dòng)態(tài)在低端的白云:設(shè)定了body_foot1和body_foot1中的循環(huán)圖片顯示定義,以及div動(dòng)態(tài)底端的設(shè)定,具體實(shí)現(xiàn)如下,感興趣的朋友可以參2013-06-24詳解八種方法實(shí)現(xiàn)CSS頁(yè)面底部固定
這篇文章主要介紹了詳解八種方法實(shí)現(xiàn)CSS頁(yè)面底部固定的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-08