html5 背景画面不够长,页面内容不足以铺满屏幕高度时，footer居底显示

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

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

方法一：

html

主要页面

底部

css

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

主要页面

底部

css

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来动态获取高度然后设置底部高度以外，还没有更好办法

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

分享到：

打赏

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

支付宝扫一扫打赏

微信扫一扫打赏