sticky footer佈局

本文轉載於:猿2048網站sticky footer佈局

1、什麼是sticky footer

　　在網頁設計中，Sticky footers設計是最古老和最多見的效果之一。它能夠歸納以下：若是頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；若是內容足夠長時，頁腳塊會被內容向下推送。

2、應用場景案例

以下：

　　當頁面內容不夠長，比較少時，’X’關閉按鈕粘貼在視窗底部；當內容夠多時，「X」按鈕會被往下推送，它不會遮蓋住內容。這就是餓了麼點擊物品是彈出一個全屏的詳情頁，點擊關閉按鈕關閉的實現。

咱們將內容填的不少時，它就出現了滾動條，移動滾動條將內容移到底部，咱們能夠看到「X」按鈕被推進到內容的下面了。

3、實現

HTML：

<div v-show="detailShow" class="detail">
        <div class="detail-wrapper clearfix">
          <div class="detail-main">
            <p>合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
              合理收費的附件是麗芙家居按時交付兩地分居四大金剛垃圾管理按時交流的方式拉倒拉時間過來華東師範紅色廣告看
            </p>
          </div>
        </div>
        <div class="detail-close">
          <i class="icon-close"></i>
        </div>
      </div>

CSS：

.detail {
  position: fixed;
  top: 0;
  left:0;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(7,17,27,0.8);
}
.detail-wrapper {
  min-height: 100%;
}
.detail-wrapper .detail-main {
  margin-top: 32px;
  /* 關鍵在於這裏設置了padding-bottom */
  padding-bottom: 64px; 
}
.detail-close {
  position: relative;
  width: 32px;
  height: 32px;
  margin: -64px auto 0 auto;
  clear: both;
  font-size: 32px;
}

.clearfix {

zoom: 1;

}

.clearfix:after {

content: "";

display: block;

height: 0;

line-height: 0;

overflow: hidden;

clear: both;

}

一、當頁面內容很少時（detail-main的內容很少時）讓「X」按鈕粘貼在窗口底部：
　 detail-wrapper與detail-close是同一級的，detail-wrapper的min-height:100%佔滿全屏，既然detail-wrapper佔滿全屏了，咱們爲何還會看到detail-close呢，在窗口下方出現呢？由於detail-close的position:relative,它是不脫離標準文檔流的，因此他的佔位空間任是排在detail-main塊下面，可是咱們給detail-close設了一個負的margin-top（margin-top： -64px），因此他就出如今咱們的視線裏即窗口的下方。 

   二、當頁面足夠多時，讓「X」按鈕被內容推進到下面：

　　關鍵在於detail-main設了一個padding-bottom給detail-close（即爲關閉按鈕）提供了一個放在上面的空間，避免detail-close負的margin-top（margin-top：-64px）使detail-close遮蓋了內容，detail-close利用負的margin-top就顯示在了內容的下面。