footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）

最新推荐文章于 2021-06-03 15:04:55 发布

__扇子

最新推荐文章于 2021-06-03 15:04:55 发布

阅读量1.2w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Java前端文章标签： html footer 自动适配底部

本文链接：https://blog.youkuaiyun.com/fanpeizhong/article/details/80588460

Java前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使网页footer在内容不足时固定在屏幕底部，而内容超出屏幕时随内容滚动的方法。通过简单的CSS设置，可以轻松实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　在项目中常常会遇到这样的问题：页面主要内容不足以铺满一个屏幕的高度，footer下面就会有白块剩余。如下图：

　　我们希望实现的效果是，在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示。如下图：

　　而当主内容超过一屏时，自动跟随显示：

　　方法如下。设置CSS：

/*在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，
使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，
footer跟随主要内容进行显示；*/
html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
/*需将主区域内容（不包括footer）设置为此class，一般为div*/
.page{
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
    min-height: 100%;
    padding-bottom: 25px;
}
footer{
    height: 25px;
    margin-top: -25px;
    opacity: 0.5;
    color: #5E5E5E;
}
/*footer 结束*/

　　HTML结构：

<div class="page">  
    主要页面  
</div>  
<footer>底部</footer>

　　需要注意的就是page的padding-bottom、footer的height、margin-top三个值要相对应。

参考资料：https://blog.youkuaiyun.com/u012076852/article/details/53068082