zoukankan      html  css  js  c++  java
  • 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;
         100%;
        height: 50px;
    }
    

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

  • 相关阅读:
    c++静态变量和静态函数
    c++抽象类和纯虚函数
    二维矩阵的算法
    JS操作CSS样式
    DOM
    JavaScript学习
    CSS样式表介绍
    HTML 学习整理
    ADO.Net知识总结
    数据库表查询高级 触发器游标等
  • 原文地址:https://www.cnblogs.com/yansj1997/p/4952385.html
Copyright © 2011-2022 走看看