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

Posted 2020-09-11 _chuck

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

 

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

 

方法一：

html

[html] view plain copy

 

 

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

css

[css] view plain copy

 

 

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

主要内容放在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

[html] view plain copy

 

 

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

css

[css] view plain copy

 

 

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

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

优点：兼容性比较好，ie6放弃治疗；

缺点：套了两层div；

 

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