詳解footer始終位於網頁底部的方法介紹-html教學-PHP中文網

詳解footer始終位於網頁底部的方法介紹

高洛峰

發布： 2017-03-20 13:38:08

原創

2205 人瀏覽過

上次說把網頁的頭部和尾部分離出來作為一個單獨的文件，所有網頁共用，這樣比較方便修改，然而，，，我發現某些方法裡尾部會緊跟在頭部後面，把內容擠在下面。。而且有的頁面內容少的話不能把尾部擠到最下面，所以，這次來研究一下怎麼能讓尾部一直在下面。。

先把html程式碼放出來：

<body>
<div class="header">头部</div>

<div class="content">
内容<br />
内容<br />
内容<br />
内容<br />

同上，以下省略N行。。。
</div>

<div class="footer">尾部</div>
</body>

登入後複製

方法一：其實這個應該是永遠位於瀏覽器視窗底部的方法，而不是位於網頁底部的方法，就像是在瀏覽某些網頁在未登入或註冊的時候下面總是有一行提示訊息的樣式，大概就和回到頂部按鈕是一樣的。。

上圖：大概就是這樣的

詳解footer始終位於網頁底部的方法介紹

CSS程式碼：

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}

登入後複製

需要為footer設定固定高度

# 方法二: 這個是讓footer位於網頁底部的方法固定footer高度+絕對定位

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}

登入後複製

在中間的內容部分加上padding- bottom是為了讓內容能夠完全顯示不被footer覆蓋，同時也要給footer設定固定高度

#方法三：固定footer高度+margin負值

html程式碼有所不同：

內容

內容

內容

內容

同上，以下省略N行。。。

CSS程式碼：

body{height: 100%;}
.wrap{min-height: 100%;}
.header{height: 100px;background-color: greenyellow;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}

登入後複製

內容加padding-bottom同上

##附圖：

##內容較少的時候：