footer固定在页面底部的实现方法总结

时间:2022-12-17 13:37:30

方法一:footer高度固定+绝对定位

HTML代码:

<body>
<header>头部</header>
<main>中间内容</main>
<footer>底部信息</footer>
</body>

CSS代码:

*{
margin:;
padding:;
}
html{
height:100%;
}
body{
min-height:100%;
margin:;
padding:;
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:;
width:100%;
height:100px;
line-height:100px;
text-align:center;
background-color: #000;
}

实现的效果:

footer固定在页面底部的实现方法总结

  • 首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;
  • 其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;
  • 最后,设置footer绝对定位,并设置height为固定高度值。

优点:footer一直存在于底部。

缺点:中间区域main如果内容不够,不能撑满页面的中间区域。

方法二:footer高度固定+margin负值

HTML代码:

<body>
<div class="container">
<header>头部</header>
<main>中间内容</main>
</div>
<footer>底部信息</footer>
</body>

CSS代码:

*{
margin:;
padding:;
}
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:;
padding:;
}
html{
height:100%;
}
body{
min-height:100%;
margin:;
padding:;
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:;
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>