观看基于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决定你的这个元素要往上面增加多少，具体情况具体分析。

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