唯品秀前端博客

在项目中常常会遇到这样的问题:页面主要内容不足以铺满一个屏幕的高度,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来动态获取高度然后设置底部高度以外,还没有更好办法

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(1) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

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

表情

最新评论

    暂无留言哦~~