css sticky footer布局

最新推荐文章于 2017-10-03 17:18:32 发布

初漾

最新推荐文章于 2017-10-03 17:18:32 发布

阅读量299

点赞数 1

分类专栏： CSS3 面试题

本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/77163560

版权

面试题同时被 2 个专栏收录

99 篇文章 7 订阅

订阅专栏

CSS3

40 篇文章 0 订阅

订阅专栏

使用场景：如果页面内容不够长时，内容块粘贴在视窗底部；如果内容足够长，页面块会被内容向下推送。

比如：叉号按钮定位在底部

固定的套路：包括两个层：内容的包装器，定在底部的层。

<style>
    /*所有clearfix写法均是如此，作用：清除浮动*/
    .clearfix{
       display: inline-block;
    }
    .clearfix::after{
      display: block;/*必写*/
      content: ".";/*必写*/
      height: 0;
      line-height: 0;
      clear: both;
      visibility: hidden;
    }
    .detail-wrapper{
      min-height: 100%;
    }
    .detail-wrapper .detail-main{
      margin-top: 64px;
      padding-bottom: 64px;/*关键：给底层预留空间，必须设置，否则footer会覆盖内容区*/
    }
    .detail-close{
      position: relative;
      width: 32px;
      height: 32px;
      margin: -64px auto 0 auto;//关键，通过负margin将footer定位在底部
      clear: both;
      font-size: 32px;//设置图标字体
    }
  </style>
</head>
<body>
   <div class="detail-wrapper clearfix">//对内容层的包装，作用：最小高度撑满整个屏幕，否则按钮不会出现在底部
       <div class="detail-main"></div>//内容层
   </div>
   <div class="detail-close">//底层

   </div>
</body>

1.为什么两层需清除浮动？
2.

初漾

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css sticky footer布局

使用场景：如果页面内容不够长时，内容块粘贴在视窗底部；如果内容足够长，页面块会被内容向下推送。比如：叉号按钮定位在底部固定的套路：包括两个层：内容的包装器，定在底部的层。<style> /*所有clearfix写法均是如此，作用：清除浮动*/ .clearfix{ display: inline-block; } .clearfix::after{
复制链接

扫一扫

专栏目录