唯品秀博客
首页 > 前端开发 > HTML/CSS > 页面内容不足以铺满屏幕高度时,footer居底显示

页面内容不足以铺满屏幕高度时,footer居底显示

2017年01月25日 唯品秀 1874次浏览

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

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

方法一:

html

1
2
3
4
<div class="page">  
    主要页面  
</div>  
<footer>底部</footer>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html,body{  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}  
.page{  
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/  
    min-height: 100%;  
    padding-bottom: 300px;  
}  
footer{  
    height: 300px;  
    margin-top: -300px;  
    opacity: 0.5;  
}

主要内容放在page内部,page最小高度为100%(注意这里html,body高度也要设为100%)。page有个padding-bottom大小为footer的高度(按需要调整),最重要的一点page的box-sizing:border-box,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,也就是说page的padding-bottom也会设定在min-height:100%内。而footer的margin-top为负的自身高度,把自己拉到page的padding-bottom空白块上,从而达到需求效果。

优点:简洁明了,没有冗余的div盒子;

缺点:box-sizing:border-box的兼容问题,ie7以下包括ie7不支持;

方法二:

html

1
2
3
4
5
6
<div class="page-container">  
    <div class="page-main">  
        主要页面  
    </div>  
    <footer>底部</footer>  
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html,body{  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}  
.page-container{  
    position: relative;  
    min-height: 100%;  
}  
.page-main{  
    padding-bottom: 300px;  
}  
footer{  
    position: absolute;  
    left: 0;  
    bottom: 0;  
    height: 300px;  
}

主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为absolute,相对于page-container居于底部。page-main有个padding-bottom为footer的高度(根据需要调整),从而达到需求效果;

优点:兼容性比较好,ie6放弃治疗;

缺点:套了两层div;

上面两种方法都只针对底部高度固定的情况,不能解决底部高度不固定的情况,一般情况下,网站的底部都是放一些友情链接之类的东西,如果你的项目要求这些友情链接是后台可配置的,数量不固定,导致底部高度不固定呢?好吧,除了用js来动态获取高度然后设置底部高度以外,还没有更好办法

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 1 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
1

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 页面内容不足以铺满屏幕高度时,footer居底显示

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

站点统计

  • 文章总数: 190 篇
  • 草稿数目: 2 篇
  • 分类数目: 13 个
  • 页面总数: 21 个
  • 评论总数: 873 条
  • 链接总数: 13 个
  • 标签总数: 371 个
  • 建站时间: 886 天
  • 注册用户: 690 人
  • 访问总量: 8672998 次
  • 最近更新: 2019年5月17日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线