zoukankan      html  css  js  c++  java
  • 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定位

  • 相关阅读:
    C语言博客作业04--数组
    DS博客作业04--树大作业
    Java课程设计
    JAVA课设-五子棋-团队博客
    yue
    Java扫雷设计
    java课设--五子棋
    软件工程-个人总结
    JAVA课程设计个人博客
    JAVA第09次实验(IO流)
  • 原文地址:https://www.cnblogs.com/Anne3/p/8178312.html
Copyright © 2011-2022 走看看