footer固定在頁面底部的實現方法總結
阿新 • • 發佈：2020-07-19
方法一：footer高度固定+絕對定位
html程式碼：
<body>
<header>頭部</header>
<main>中間內容</main>
<footer>底部資訊</footer>
</body>
css程式碼：
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
min-height:100%;
margin:0;
padding:0;
position:relative;
}
header{
background: #000;
text-align: center;
height:50px;
line-height: 50px;
color:#fff;
}
main{ /* main的padding-bottom值要等於或大於footer的height值 */
padding-bottom:100px;
background:#ccc;
text-align: center;
}
footer{
position:absolute;
color:#fff;
bottom:0;
width:100%;
height:100px;
line-height:100px;
text-align:center;
background-color: #000;
}
- 首先，設定body的高度至少充滿整個螢幕，並且body作為footer絕對定位的參考節點；
- 其次，設定main（footer前一個兄弟元素）的padding-bottom值大於等於footer的height值，以保證main的內容能夠全部顯示出來而不被footer遮蓋；
- 最後，設定footer絕對定位，並設定height為固定高度值。
優點：footer一直存在於底部。
缺點：中間區域main如果內容不夠，不能撐滿頁面的中間區域。
素材公社https://www.wode007.com/sites/73209.html 愛圖網https://www.wode007.com/sites/73208.html
方法二：footer高度固定+margin負值
html程式碼：
<body>
<div class="container">
<header>頭部</header>
<main>中間內容</main>
</div>
<footer>底部資訊</footer>
</body>
css程式碼：
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.container{
min-height:100%;
}
header{
background: #000;
text-align: center;
height:50px;
line-height: 50px;
color:#fff;
}
main{
padding-bottom:100px;
background:#ccc;
text-align: center;
}
footer{
color:#fff;
height:100px;
line-height:100px;
margin-top:-100px;
text-align:center;
background-color: #000;
}
此方法把footer之前的元素放在一個容器裡面，形成了container和footer並列的結構：
首先，設定.container的高度至少充滿整個螢幕；
其次，設定main（.container最後一個子元素）的padding-bottom值大於等於footer的height值；
最後，設定footer的height值和margin-top負值。
展示效果跟第一種是一樣的，缺點跟第一種也是一樣的。
方法三：footer高度任意+js
html程式碼：
<header>頭部</header> <main>中間內容</main> <footer>底部資訊</footer>
css程式碼：
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
min-height:100%;
margin:0;
padding:0;
position:relative;
}
header{
background: #000;
text-align: center;
height:50px;
line-height: 50px;
color:#fff;
}
main{ /* main的padding-bottom值要等於或大於footer的height值 */
background:#ccc;
text-align: center;
}
footer{
color:#fff;
width:100%;
height:100px;
line-height:100px;
text-align:center;
background-color: #000;
}
/* 動態為footer新增類fixed-bottom */
.fixed-bottom {
position: fixed;
bottom: 0;
width:100%;
}
js（jquery）程式碼：
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight,//網頁正文全文高度
winHeight = window.innerHeight;//可視視窗高度，不包括瀏覽器頂部工具欄
if(!(contentHeight > winHeight)){
//當網頁正文高度小於可視視窗高度時，為footer新增類fixed-bottom
$("footer").addClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
常用的純css實現footer sticker
css程式碼：
html, body, #sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;}
#footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}
html程式碼：
<div id="sticker">
<div id="stickerCon"></div>
</div>
<div id="footer">footer</div>