网页布局中页面内容不足一屏时页脚footer固定底部

方法一：给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>

方法三：也是最简单的方法。

html {

  min-height: 100%;

  position: relative;

}

.footer {

position: absolute;

bottom: 0;

width: 100%;

}

如果大家用这几种方法有产生什么弊端，请回复大家一起交流哦！

了解更详细的内容可以访问：http://www.waigai.cn

巴特西

网页布局中页面内容不足一屏时页脚footer固定底部

最新文章

热门文章