css Sticky footer的實現
阿新 • • 發佈：2018-11-08
有時候製作網頁的時候當內容太少的時候，不足於填充一屏的視窗區域，按普通的佈局，就會出現下面圖片中的樣子(也就是底部內容並沒有位於視窗的底部，而留下了大量空白）。
一：第一種方法：國外大神提供
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> * { padding: 0px; margin: 0px; } html, body, #wrap { box-sizing: border-box; height: 100%; border: 4px solid green; } body> #wrap { height: auto; min-height: 100%; } #main { padding-bottom: 150px; } /* 必須使用和footer相同的高度 */ #footer { position: relative; margin-top: -150px; /* footer高度的負值 */ height: 150px; clear: both; background: red; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ </style> </head> <body> <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> CSS的簡單在於它易學，CSS的困難在於尋找更好的解決方案。在CSS的世界裡，似乎沒有完美這種說法。所以，現在介紹的CSS絕對底部，只是目前個人見過的方案中比較完美的吧。 先說我們為什麼會使用到這個CSS底部佈局解決方案: 當做一個頁面時，如果頁面內容很少，不足於填充一屏的視窗區域，按普通的佈局，就會出現下面圖片中的樣子(也就是底部內容並沒有位於視窗的底部，而留下了大量空白。 </div> <div id="side"> 對於追未完美的設計師來說，這是不美觀的。網上有一些解決方案，但會出現當改變視窗高度時，底部和正文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變視窗高度，但設計嘛，追求的就是盡善盡美。下面是我找到的一個比較完美的方法，來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位於視窗最下面。當改變視窗高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部佈局方案。不知道他有沒有去申請專利:) </div> </div> </div> <div id="footer"> 臥槽 </div> </body> </html>
html,body,#wrap設定height : 100%的目的是讓這些很少的內容撐滿整個螢幕，這樣才能將footer置於底部，footer的margin-top:-64px的原因就是將footer往上頂就顯示出來了，如果沒有margin-top那麼footer被頂到頁面之下了（前提是wrap被設定成高度為100%）