CSS实现Footer固定底部，超过一屏自动撑开

最新推荐文章于 2024-03-08 01:13:26 发布

weixin_30361641

最新推荐文章于 2024-03-08 01:13:26 发布

阅读量451

点赞数

原文链接：http://www.cnblogs.com/mymission/p/5761667.html

版权

方法一：给html、body都设置100%的高度，确定body下内容设置min-height有效，然后设置主体部分min-height为100%，此时若没有header、footer则刚好完美占满全屏（参考《div绝对居中、宽高自适应、多栏宽度自适应》），但是有了这两个，只能另寻他路，由于高版本浏览器对box-sizing的支持，我们可以在100%的高度中通过padding给header、footer空出两部分空白区域，再通过给header设置等同于自身高度的负值margin-bottom，给footer设置等同于自身高度的负值margin-top，就完美的把两者移回可见区域，如此以来，既满足content部分不满一屏时footer在底部，又满足了，超过一屏时footer被撑开的需求。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer始终处在底部</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing:border-box;
    }
    html,body { height: 100%;}
    header { 
        height: 60px; 
        margin-bottom: -60px; 
        background: #1381cc; 
        color: #FFF; 
        position: relative;
    }
    section { 
        background: #fff; 
        min-height: 100%; 
        padding: 60px 0 60px;}
    footer { 
        height:60px; 
        margin-top: -60px; 
        background: #0c4367; 
        color: #FFF;
    }
    
</style>
<body>
    <header></header>
    <section class="content">
        <div style="height:1000px;"></div>
    </section>
    <footer class="footer"></footer>
</body>
</html>

方法二：将footer以外的部分再用wrap包裹起来，内部设置padding-bottom，footer相同的使用margin-top，如此以来不用使用border-box；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer始终处在底部</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body { height: 100%;}
    .wrap{
        min-height: 100%;
    }
    .min{
        padding-bottom: 60px;
    }
    header { 
        height: 60px; 
        background: #1381cc; 
        color: #FFF; 
        
    }
    section { 
        background: #fff; 
    }
    footer { 
        height:60px; 
        margin-top: -60px; 
        background: #0c4367; 
        color: #FFF;
    }
    
</style>
<body>
    <div class="wrap">
        <div class="min">
            <header></header>
            <section class="content">
                <div style="height:10px;"></div>
            </section>
        </div>
    </div>
    <footer class="footer"></footer>
</body>
</html>