底部粘連(stiky footer)布局，stikyfooter

底部粘連(stiky footer)布局，stikyfooter
前面的話

　　在網頁設計中，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>