底部粘連(stiky footer)佈局

前面的話

　　在網頁設計中，Sticky footers設計是最古老和最多見的效果之一，大多數人都曾經經歷過。它能夠歸納以下：若是頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；若是內容足夠長時，頁腳塊會被內容向下推送。本文將詳細介紹sticky footer的4種實現方式

 

絕對定位

　　常見的實現方法是對(.sticky)footer進行絕對定位，假設高度爲50px。對父級(.box)進行相對定位，將html、body的高度設置爲100%，父級(.box)的最小高度設置爲100%，將(.content)內容部分設置padding-bottom爲footer的高度，即50px，這裏不用margin-bottom是由於會出現margin-bottom傳遞的狀況

　　[注意]關於margin傳遞的詳細狀況移步至此

<style>
html,body{height:100%}
body{margin:0}
.box{position:relative;background-color:lightblue;min-height:100%;}
.content{padding-bottom:50px;}
.sticky{position:absolute;background-color:lightgreen;width:100%;height:50px;bottom:0;}
</style>
<div class="box">
  <main class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...
  </main>
  <footer class="sticky"></footer>
</div>

　　效果以下

 

calc

　　上面的代碼中，由於要實現最小高度100%的效果，給html、body都設置爲高度100%，不利於代碼擴展。下面使用100vh來代替100%，代碼會簡潔不少。內容部分(.content)設置最小高度爲calc(100vh - 50px)便可

　　[注意]關於視口單位vh的詳細信息移步至此，關於calc的詳細信息移步至此

<style>
body{margin:0}
.content{background-color:lightblue;min-height: calc(100vh - 50px)}
.sticky{background-color:lightgreen;height:50px;}
</style>
<div class="box">
  <main class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit reiciendis!
    ...
  </main>
  <footer class="sticky"></footer>
</div>

　　效果以下

 

flex

　　上面的代碼中，若是sticky的底部高度發生了變化，則內容部分的代碼也須要進行相應地調整。若是使用flex，則能夠更加靈活。爲父級(.box)設置flex、上下排列及最小高度爲100vh，爲內容部分(.content)設置flex:1便可

　　[注意]關於flex的詳細信息移步至此

<style>
body{margin:0}
.box{display:flex;flex-flow:column;min-height:100vh;background-color:lightblue;}
.content{flex:1;}
.sticky{background-color:lightgreen;height:50px;}
</style>

 

grid

　　做爲最新佈局方式的grid固然也能夠實現，並且代碼更加簡潔

　　[注意]關於grid的詳細信息移步至此

<style>
body{margin:0}
.box{display:grid;grid-template-rows:1fr 50px;min-height:100vh;}
.content{background-color:lightblue;}
.sticky{background-color:lightgreen;}
</style>