Stick footers布局總結
阿新 • • 發佈：2017-07-01
width eight padding auto 容器 num col 避免 adding
一、Sticky footers解釋
在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；如果內容足夠長時，頁腳塊會被內容向下推送。(效果如下圖)
二、實現
2.1 容器使用負的margin bottom
首先是個包裹除了footer之外其他元素的容器，然後容器內有個占位元素，以及使用負的margin bottom,他們的絕對值相等。
<body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer> </body>
html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; margin-bottom: -50px; } .footer, .push { height: 50px; }
2.2 底部使用負的margin bottom
既然想到在容器上使用負的margin bottom，同理可得負的margin top版本
<body> <div class="content"> <div class="content-inside"> content </div> </div> <footer class="footer"></footer> </body
html, body { height: 100%; margin: 0; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; }
2.3 calc版本
結合vh單位，calc 版本就粗暴很多。
<body> <div class="content"> content </div> <footer class="footer"></footer> </body>
.content { min-height: calc(100vh - 70px); } .footer { height: 50px; }
calc中的 70px，和50px是假定了content中最後一個元素有個20px的margin bottom，你不必在意這些~
2.4 flexbox版本
flexbox版本同樣很簡單，並且相比前面三種方式，它不需要知道footer的高度，避免了Magic Number的尷尬。
<body> <div class="content"> content </div> <footer class="footer"></footer> </body>
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; }
原理是flex: 1使得content的高度可以自由伸縮。
2.5 grid版本
grid比flexbox還要新很多，使用grid同樣很簡潔，遺憾的是現在Chrome Canary 或者 Firefox Developer Edition才能看到效果。
<body> <div class="content"> content </div> <footer class="footer"></footer> </body>
html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; }
文章轉自： http://w3ctrain.com/2016/06/24/stick-footer/
Stick footers布局總結