观看基于vue的仿饿了么关于sticky footer布局

95 阅读 0 评论 63 点赞

我是靠谱客的博主畅快马里奥，最近开发中收集的这篇文章主要介绍观看基于vue的仿饿了么关于sticky footer布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在观看基于vue的仿饿了么webapp开发的过程中遇到一个布局问题，这是一个恒久的问题就是怎么样让一个区块始终在页面底部，无论它前面的内容只有几行或者多到页面出现滚动条，该区块始终出现在页面底部，这就是著名的Sticky+footer布局。
初始代码如下：

  <div v-show="detailShow" class="detail">
          <div class="detail-wrapper clearfix">
              <div class="detail-main">
                 <h1 class="name">{{seller.name}}</h1>
              </div>
          </div>

          <div class="detail-close" @click="closeDetail">
             <i class="icon-close"></i>
          </div>

      </div>

一个大的div作为一个包裹作用，里面是两个子div，第一个子div就是用来显示内容的（里面还有一个子div），第二个div就是一个关闭按钮，显示在页面最底部的那一个区块
这里写图片描述

对于第一个div的class 需要设置如下

.clearfix
   display: inline-block
   &:after
     display: block
     content: ''
     height: 0
     line-height: 0
     clear: both
     visibility: hidden

它这个布局实现的原理就是给它的伪类after添加一个内容，设置display必须为block或者inline-block，让它伪类的内容占一行，然后设置height跟line-height都为0，将它的visibility设置为hidden(这里还是会占据空间)，让伪类一直占据一行然后将下面的区块，也就是我们要求一直在底部的区块挤下去，这样就实现了sticky footer布局。

class为clearfix的类设置display:inline-block或者display:block都可以，这里是行内块显示，所以用inline-block，将class=”detail-wrapper”的最小高度设置为100%，这样无论它的内容多少都会占领整个包裹它的div（class为detail的div）,那么最下面的div则会紧紧的贴在最下面，然后给最下面的div设置样式如下：

.detail-close
         position: relative
         width: 32px
         height: 32px
         margin: -64px auto 0 auto
         clear: both
         font-size: 32px

clear: both清除带来的浮动，
margin: -64px auto 0 auto在这里就是这个margin-top:-64px决定你的这个元素要往上面增加多少，具体情况具体分析。

希望这篇文章能够帮到你。