footer居底

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

结构部分：

<div class="container">

    <div class="header">header</div>

    <div class="center">

        <p>我是个好人我是个好人我是个好人我是个好人</p>

        <p>我是个好人我是个好人我是个好人我是个好人</p>

        <p>我是个好人我是个好人我是个好人我是个好人</p>

        <p>我是个好人我是个好人我是个好人我是个好人</p>

        <p>我是个好人我是个好人我是个好人我是个好人</p>

        <p>我是个好人我是个好人我是个好人我是个好人</p>

        <p>猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪猪</p>

    </div>

    <div class="footer">

        <p>footerfooterfooterfooterfooterfooter</p>

    </div>

</div>

样式部分：

.container{

    position: relative;

    min-height: 100%;

}

.center{

    padding-bottom: 50px;

}

.footer{

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 50px;

}

这样，可以保证footer部分永远居底，且不用借助js脚本。