溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)web開發(fā)中怎么將頁腳固定在頁面底部的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
作為一個Web的前端攻城師，在制作頁面效果時肯定有碰到下面這種現(xiàn)象：當(dāng)一個HTML頁面中含有較少的內(nèi)容時，Web頁面的“footer”部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現(xiàn)在寬屏越來越多，這種現(xiàn)象更是常見。那么如何將Web頁面的“footer”部分永遠(yuǎn)固定在頁面的底部呢？注意了這里所說的是頁腳footer永遠(yuǎn)固定在頁面的底部，而不是永遠(yuǎn)固定在顯示器屏幕的底部，換句話說，就是當(dāng)內(nèi)容只有一點(diǎn)點(diǎn)時，Web頁面顯示在瀏覽器底部，當(dāng)內(nèi)容高度超過瀏覽器高度時，Web頁面的footer部分在頁面的底部，總而言之Web頁面的footer部分永遠(yuǎn)在頁面的底部，換句說，F(xiàn)ooter部分永遠(yuǎn)沉底。如下圖所示： 
那么今天主要和大家一起學(xué)習(xí)如何將頁腳固定在頁面的底部？
方法一
首先我們來看第一種方法，這種方法是來自于Matthew James Taylor的《How to keep footers at the bottom of the page》。下面我們就一起來看看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增加所需的內(nèi)容結(jié)構(gòu)，如下所示：
代碼如下:
<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>
真正來說，實現(xiàn)這頁腳永遠(yuǎn)固定在頁面的底部，我們只需要四個div，其中div#container是一個容器，在這個容器之中，我們包含了div#header（頭部），div#page（頁面主體部分，我們可以在這個div中增加更多的div結(jié)構(gòu)，如上面的代碼所示），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;
}
/*=======主體內(nèi)容部分=======*/
#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;
}
下面我們一起來看看這種方法的實現(xiàn)原理：
1.<html>和<body>標(biāo)簽：html和body標(biāo)簽中必須將高度(height)設(shè)置為“100%”,這樣我們就可以在容器上設(shè)置百分比高度，同時需要將html,body的margin和padding都移除，也就是html,body的margin和padding都為0；
2.div#container容器：div#container容器必須設(shè)置一個最小高度(min-height)為100％；這主要使他在內(nèi)容很少（或沒有內(nèi)容）情況下，能保持100％的高度，不過在IE6是不支持min-height的，所以為了兼容IE6，我們需要對min-height做一定的兼容處理，具體可以看前面的代碼，或者閱讀Min-Height Fast Hack了解如何解決min-height在Ie6下的bug問題。另外我們還需要在div#container容器中設(shè)置一個"position:relative"以便于里面的元素進(jìn)行絕對定位后不會跑了div#container容器；
3.div#page容器：div#page這個容器有一個很關(guān)鍵的設(shè)置，需要在這個容器上設(shè)置一個padding-bottom值，而且這個值要等于（或略大于）頁腳div#footer的高度（height）值，當(dāng)然你在div#page中可以使用border-bottom人水-width來替代padding-bottom，但有一點(diǎn)需要注意，此處你千萬不能使用margin-bottom來代替padding-bottom，不然會無法實現(xiàn)效果；
4.div#footer容器：div#footer容器必須設(shè)置一個固定高度，單位可以是px(或em)。div#footer還需要進(jìn)行絕對定位，并且設(shè)置bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現(xiàn)我們前面所說的效果，當(dāng)內(nèi)容只有一點(diǎn)時，div#footer固定在屏幕的底部（因為div#container設(shè)置了一個min-height:100%），當(dāng)內(nèi)容高度超過屏幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設(shè)一個"width:100%"，讓他在整個頁面上得到延伸；
5.其他div：至于其他容器可以根據(jù)自己需求進(jìn)行設(shè)置，比如說前面的div#header,div#left,div#content,div#right等。
優(yōu)點(diǎn)：
結(jié)構(gòu)簡單清晰，無需js和任何hack能實現(xiàn)各瀏覽器下的兼容，并且也適應(yīng)iphone。
缺點(diǎn)：
不足之處就是需要給div#footer容器設(shè)置一個固定高度，這個高度可以根據(jù)你的需求進(jìn)行設(shè)置，其單位可以是px也可以是em，而且還需要將div#page容器的padding-bottom（或border-bottom-width）設(shè)置大小等于（或略大于）div#footer的高度，才能正常運(yùn)行。
上面就是Matthew James Taylor介紹的如何實現(xiàn)頁腳永遠(yuǎn)固定在頁面的底部，如果大家感興趣可以閱讀原文，也可以直接點(diǎn)擊這里查看Demo。
方法二：
這種方法是利用footer的margin-top負(fù)值來實現(xiàn)footer永遠(yuǎn)固定在頁面的底部效果，下面我們具體看是如何實現(xiàn)的。
HTML Markup
代碼如下:
<div id="container">
<div id="page">Main Content</div>
</div>
<div id="footer">footer</div>
上面的代碼是最基本的HTML Code，同時你也發(fā)現(xiàn)了div#footer和div#container是同輩關(guān)系，不像方法一，div#footer在div#container容器內(nèi)部。當(dāng)然你也可以根據(jù)你的需要把內(nèi)容增加在div#container容器中，如：一個三列布局，而且還帶有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: -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;
}
方法一和方法二有幾點(diǎn)是完全相同的，比如說方法一中的1-3三點(diǎn)，在方法二中都一樣，換句話說，方法二中也需要把html,body高度設(shè)置為100%,并重置margin,padding為0；其二div#container也需要設(shè)置min-height:100%,并處理好IE6下的min-height兼容問題；其三也需要在div#page容器上設(shè)置一個padding-bottom或border-bottom-width值等于div#footer高度值（或略大于）。那么兩種方法不同之處是：
1.div#footer放在div#container容器外面，也就是說兩者是同級關(guān)系，如果你有新元素需要放置在與div#container容器同級，那你需要將此元素進(jìn)行絕對定位，不然將會破壞div#container容器的min-height值；
2.div#footer進(jìn)行margin-top的負(fù)值設(shè)置，并且此值等于div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。
優(yōu)點(diǎn)：
結(jié)構(gòu)簡單清晰，無需js和任何hack能實現(xiàn)各瀏覽器下的兼容。
缺點(diǎn)：
要給footer設(shè)置固定值，因此無法讓footer部分自適應(yīng)高度。
大家要是對這種方法感興趣，你也可以瀏覽一下《CSS Sticky Footer》和《Pure Css Sticky Footer》，或者直接點(diǎn)擊Demo查看其源代碼。
方法三：
實現(xiàn)在頁腳永遠(yuǎn)固定在頁面底部的方法有很多，但是有很多方法是需要使用一些hack或借助javaScrip來實現(xiàn)，那么接下來要說的方法三，僅僅使用了15行的樣式代碼和一個簡單明了的HTML結(jié)構(gòu)實現(xiàn)了效果，并且兼容性強(qiáng)，別的不多說，先看代碼。
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，當(dāng)然你也可以加上新的內(nèi)容，不過有一點(diǎn)需要注意如果你在div#container和div#footer容器外增加內(nèi)容的話，新加進(jìn)徠的元素需要進(jìn)行絕對定位。如如說你可以在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 -60px;/*margin-bottom的負(fù)值等于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推下去，下面我們就一起看看這種方法是怎么實現(xiàn)頁腳永遠(yuǎn)固定在頁面底部的。
1.<html>和<body>標(biāo)簽：html,body標(biāo)簽和前兩種方法一樣，需要設(shè)置“height:100%”并重置“margin”和“padding”為0；
2.div#container:方法三關(guān)鍵部分就在于div#container的設(shè)置，首先需要設(shè)置其最小高度（min-height）為100％,為了能兼容好IE6，需要對min-height進(jìn)行兼容處理（具體處理方法看前面或代碼）另外這里還有一個關(guān)鍵點(diǎn)在div#container容器上需要設(shè)置一個margin-bottom，并且給其取負(fù)值，而且值的大小等于div#footer和div.push的高度，如果div#footer和div.push設(shè)置了padding和border值，那么div#container的margin-bottom負(fù)值需要加上div#footer和div.push的padding和border值。也就是說“div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}”。一句話來說：div#container的margin-bottom負(fù)值需要和div#footer以及div.push的高度一致（如果有padding或border時，高度值需要加上他們）；
3.div.push:在div.push中我們不應(yīng)該放置任何內(nèi)容，而且這個div必須放置在div#container容器中，而且是最底部，并且需要設(shè)置其高度值等于div#footer的值，最好加上clear:both來清除浮動。div.push容器在此處所起的作用就是將footer往下推。
4.div#footer容器：div#footer容器和方法二一樣，不能放到div#container內(nèi)部，而和div#container容器同級，如果需要設(shè)置元素和footer之間的間距，最好使用padding來代替margin值。
優(yōu)點(diǎn)：
簡單明了，易于理解，兼容所有瀏覽器。
缺點(diǎn)：
較之前面的兩種方法，多使用了一個div.push容器，同樣此方法限制了footer部分高度，無法達(dá)到自適應(yīng)高度效果。
如果大家對方法三想了解更多可以點(diǎn)擊這里或者直接從DEMO中下載代碼自己研究一下。
方法四：
前面三種方法我們都不需要任何javaScript或jQuery的幫助，讓我們實現(xiàn)了頁腳永遠(yuǎn)固定在頁面底部的效果，前面三種方法雖然沒有使用jQuery等幫助，但我們都額外增加了HTML標(biāo)簽來實現(xiàn)效果。如果你省略了這些HTML標(biāo)簽，再要實現(xiàn)效果就比較困難了，那么此時使用jQuery或javaScript方法來幫助實現(xiàn)是一種很好的辦法，下面我們就一起來看第四種方法，通過jQuery來實現(xiàn)頁腳永遠(yuǎn)固定在頁面底部的效果。
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標(biāo)簽，此時你也可以隨時在body中增加內(nèi)容，只要確保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;
}
這個方法不像前面三種方法靠CSS來實現(xiàn)效果，這里只需要按正常的樣式需求寫樣式，不過有一點(diǎn)需要特別注意在html,body中不可以設(shè)置高度height為100%，否則此方法無法正常運(yùn)行，如果你在div#footer中設(shè)置了一個高度并把寬度設(shè)置為100%將更是萬無一失了。
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("-----------")
*/
//如果頁面內(nèi)容高度小于屏幕高度，div#footer將絕對定位到屏幕底部，否則div#footer保留它的正常靜態(tài)定位
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代碼，可以輕松的幫我們實現(xiàn)頁腳永遠(yuǎn)固定在頁面底部，使用這種方法有幾個地方需要注意
1.確保正常引入了jQuery版本庫，并正常調(diào)入了上面那段jQuery代碼；
2.確保<div id="footer">是在body中最后；
3.確保在html,body中沒有設(shè)置高度為100%。
優(yōu)點(diǎn)：
結(jié)構(gòu)簡單，無需外加無用標(biāo)簽，兼容所有瀏覽器，不用另外寫特別樣式。頁腳可以不固定高度。
缺點(diǎn)：
在不支持js的瀏覽器中無法正常顯示，另外每次改變?yōu)g覽器大小會閃動一下。
今天主要和大家一起探討和學(xué)習(xí)了四種方法，用來實現(xiàn)Web頁面腳部永遠(yuǎn)固定在頁面的底，這里在著得說清楚一下，是頁腳永遠(yuǎn)固定在頁面的底部，而不是永遠(yuǎn)固定在瀏覽器窗口的底部，換句話說，就說當(dāng)頁面主內(nèi)容沒有顯示屏幕高時，頁腳固定在顯示器屏幕的底部，但當(dāng)頁面內(nèi)容超過顯示器屏幕高度時，頁腳又會跟隨內(nèi)容往下沉，但頁腳都永遠(yuǎn)固定在頁的底部。前面三種都是純CSS實現(xiàn)，最后一種采用的是jQuery方法實現(xiàn)，四種方法各有各的利弊，大家使用時可以根據(jù)自己的需求來定奪。
感謝各位的閱讀！關(guān)于“web開發(fā)中怎么將頁腳固定在頁面底部”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
