在观看基于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决定你的这个元素要往上面增加多少,具体情况具体分析。
希望这篇文章能够帮到你。