zoukankan      html  css  js  c++  java
  • 固定footer在底部

    作者:李宇
    链接:https://www.zhihu.com/question/23220983/answer/25880123
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    这个是css中比较经典的问题。

    这里固定在底部包括两种情况,第一种是当页面内容尚未填充满的时候,页脚需要固定在底部,第二种是页面填充满后,页脚需要随页面内容的增加而填充在主体内容的下方。

    由于受书写模式的影响,一般情况下无法直接将一元素置于垂直的某一位置,除非使之脱离普通流。而脱离普通流后就很难满足第二种要求,这种情况下也可借助js进行计算进行定位,但这种效果可能由于计算时间和浏览器渲染的问题发生跳动(没亲自试过)。因此,这里提供一种比较通用的,基于普通文档流的解决方法。

    具体解决方案:直接来代码。
    <html>
    <head>
    <style type="text/css">
    html,body{height:100%}
    .footer {margin-top:-30px;height:30px;background-color:#eee;}
    .wrap{min-height:100%}
    .main{padding-bottom:30px;overflow:hidden;}
    </style>
    </head>
    <body>
        <div class="wrap">
            <div class="main">这里是网页的主体</div>
        </div>
        <div class="footer">这里是页脚</div>
    </body>
    </html>
    

    思路就是创建一个足够大的容器wrap包含整个网页,并将footer挤到底端,通过设置margin-top:-30px使之上浮,并在main中设置padding-bottom使之能够容下页脚而不重叠。

     
    https://www.zhihu.com/question/23220983
  • 相关阅读:
    进程间通迅之消息队列
    进程间通讯之共享内存
    标准块CP功能实现
    标准字符cp功能
    文件cp功能
    jest 的 coverage 提示 unknown 的解决方案
    js中的相等
    getBoundingClientRect 和 requestAnimFrame 的polyfill
    设计模式(4): 给组件实现单独的store
    Vue项目移动端滚动穿透问题
  • 原文地址:https://www.cnblogs.com/twoheads/p/10401995.html
Copyright © 2011-2022 走看看