首頁 > 文章 > web前端 > 詳解footer始終位於網頁底部的方法介紹

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

高洛峰原創: 2017-03-20 13:38:082251瀏覽

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

先把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同上

##附圖：

##內容較少的時候：

#內容多的時候：

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

以上是詳解footer始終位於網頁底部的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML元介紹六 - tr下一篇：HTML元介紹六 - tr

看更多