左手抓右手

右手加左手

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

结构部分:

<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脚本。

posted on 2015-11-10 11:37  yansj1997  阅读(213)  评论(0编辑  收藏  举报