觀看基於vue的仿餓了麼關於sticky footer佈局
阿新 • • 發佈:2019-02-04
在觀看基於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決定你的這個元素要往上面增加多少,具體情況具體分析。
希望這篇文章能夠幫到你。