• footer不满一屏时在最底部,超出一屏时在页面最下部


    1.对footer的底部,一般不满一屏时要固定在页面的最底部,超出一屏时随着页面的高度来

    最近发现公司的同事又遇到了这个问题

    自己一直用的解决方法是

    在主内容外加一层div 设为min-height:100%;

    加上后发现没用,这时需要给html,body设置height:100%;需要两个都设为height:100%;

    footer设为绝对定位,bottom:0;

    最后div要用padding-bottom把底部的区域空出来,免得底部覆盖掉内容

    html结构如下:

    <html>
       <body>
           <div class="con">
    <footer></footer>
    </
    div> </body> </html>

    css如下:

    html,body{
         height:100%
    }
    .con{
         min-height:100%;
         position:relative;
         padding-bottom:120px;
    }
    footer{
        100%;
        height:100px;
        position:absolute;
        left:0;
        bottom:0;
    }
    

      需要注意的是,body,html都需要height:100%;.con要设置相对定位,不然footer还是相对body定位

  • 相关阅读:
    基本数据类型(int, bool, str)
    万恶之源之运算符
    python基础初识
    leetcode 653. Two Sum IV
    leetcode 16 3Sum Closest
    leetcode15 3Sum
    leetcode 1 Two Sum
    【站立会议】第四天
    【站立会议】第三天
    【站立会议】第二天
  • 原文地址:https://www.cnblogs.com/Anne3/p/8178312.html
Copyright © 2020-2023  润新知