zoukankan      html  css  js  c++  java
  • 底部粘连(stiky footer)布局

    前面的话

    在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。本文将详细介绍sticky footer的4种实现方式

    绝对定位

    常见的实现方法是对(.sticky)footer进行绝对定位,假设高度为50px。对父级(.box)进行相对定位,将html、body的高度设置为100%,父级(.box)的最小高度设置为100%,将(.content)内容部分设置padding-bottom为footer的高度,即50px,这里不用margin-bottom是因为会出现margin-bottom传递的情况

    <style>
    html,body{height:100%}
    body{margin:0}
    .box{position:relative;background-color:lightblue;min-height:100%;}
    .content{padding-bottom:50px;}
    .sticky{position:absolute;background-color:lightgreen;100%;height:50px;bottom:0;}
    </style>
    <div class="box">
      <main class="content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
        ...
      </main>
      <footer class="sticky"></footer>
    </div>
     

    calc

    上面的代码中,因为要实现最小高度100%的效果,给html、body都设置为高度100%,不利于代码扩展。下面使用100vh来代替100%,代码会简洁很多。内容部分(.content)设置最小高度为calc(100vh - 50px)即可

    <style>
    body{margin:0}
    .content{background-color:lightblue;min-height: calc(100vh - 50px)}
    .sticky{background-color:lightgreen;height:50px;}
    </style>
    <div class="box">
      <main class="content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
        ...
      </main>
      <footer class="sticky"></footer>
    </div>

    flex

    上面的代码中,如果sticky的底部高度发生了变化,则内容部分的代码也需要进行相应地调整。如果使用flex,则可以更加灵活。为父级(.box)设置flex、上下排列及最小高度为100vh,为内容部分(.content)设置flex:1即可

    <style>
    body{margin:0}
    .box{display:flex;flex-flow:column;min-height:100vh;background-color:lightblue;}
    .content{flex:1;}
    .sticky{background-color:lightgreen;height:50px;}
    </style>

    资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com

    grid

    作为最新布局方式的grid当然也可以实现,而且代码更加简洁

    <style>
    body{margin:0}
    .box{display:grid;grid-template-rows:1fr 50px;min-height:100vh;}
    .content{background-color:lightblue;}
    .sticky{background-color:lightgreen;}
    </style>
  • 相关阅读:
    Android开发系列(十七)QQ聊天之Android显示Gif ——在TextView中添加动态表情
    玩转Hook——Android权限管理功能探讨(二)
    玩转Hook——Android权限管理功能探讨(一)
    由一个简单算法想到的程序员素养问题
    Android手机间无线互传功能探索及实现
    从字节码的角度看Java内部类与外部类的互相访问
    HttpClient与HttpUrlConnection下载速度比较
    记一道有趣的Twitter面试题
    Android改进版CoverFlow效果控件
    Android应用如何监听自己是否被卸载及卸载反馈功能的实现(第二版)
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14010527.html
Copyright © 2011-2022 走看看