美文网首页
stricky footer布局

stricky footer布局

作者: Mcq | 来源:发表于2020-06-07 20:50 被阅读0次
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .bg{
      position: fixed;
      top:0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      overflow: auto;
      height: 100%;
      background:rgba(0,0,0,0.5);
    }
    .bg > .content-wrapper{
      height:auto;
      min-height:100%;
    }
    .content{
      padding-bottom:150px;
    }
    .footer{
      text-align: center;
      position:relative;
      margin-top:-150px;
      height:150px;
    }
    /* .clearfix{
      display:inline-block;
    } */
    /* .clearfix:after{
      content:"";
      display:block;
      height:0;
      clear:both;
      visibility: hidden;
    } */
  </style>
  </head>

  <body>
    <div class="bg">
      <div class="content-wrapper clearfix">
        <div class="content">
          content
        </div>
      </div>
      <div class="footer">X</div>
    </div>
  </body>

</html>

相关文章

  • stricky footer布局

  • sticky-footer布局的方法

    一、什么是sticky-footer布局?sticky-footer布局是一种经典的布局效果,可概况如下:如果页面...

  • web前端-Sticky Footer布局

    什么是Sticky Footer布局 Sticky Footer布局实现的效果是, 当页面中的内容高度小于屏幕高度...

  • css布局

    一、单列布局 常见单列布局分为: header、content和footer等宽的单列布局; header、foo...

  • sticky footer布局

    实例 套路 一个展示内容content的容器wrapper 一个展示footer的容器 wrapper设置最小高度...

  • stick footer布局

    在手机端网页中常常会遇到这种布局需求:将footer固定到底部。文章内容不足满屏时 footer在底部,超过满屏时...

  • sticky footer 布局

    在网页设计中,sticky footer设计是最古老的和常见的效果之一,大多数人都应该经历过。它可以概括如下:当页...

  • sticky footer 布局

    一、stick footer 布局介绍 文档包括内容区与页脚区。当内容高度未达到视口的高,页脚一直在视口最底部。当...

  • Sticky footer布局

    Sticky Footer布局概括如下:如果页面内容不够长的时候,页脚粘贴在视窗底部;如果内容足够长,页脚会被内容...

  • 常见class关键词:

    布局类:header, footer, container, main, content, aside, page...

网友评论

      本文标题:stricky footer布局

      本文链接:https://www.haomeiwen.com/subject/ninqtktx.html