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

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

 

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

方法一:

<div class="page">
    主要页面
</div>
<footer>底部</footer>
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;
}

方法二

<div class="page-container">
    <div class="page-main">
        主要页面 
    </div>
    <footer>底部</footer>
</div>
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来动态获取高度然后设置底部高度以外,还有什么用css就直接解决的好的方法么?

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页