CSS的簡單在于它易學(xué),CSS的困難在于尋找更好的解決方案。在CSS的世界里,似乎沒有完美這種說法。所以,現(xiàn)在介紹的CSS絕對底部,只是目前個人見過的方案中比較完美的吧。
先說我們?yōu)槭裁磿褂玫竭@個CSS底部布局解決方案:
當(dāng)做一個頁面時,如果頁面內(nèi)容很少,不足于填充一屏的窗口區(qū)域,按普通的布局,就會出現(xiàn)下面圖片中的樣子(也就是底部內(nèi)容并沒有位于窗口的底部,而留下了大量空白。
對于追未完美的設(shè)計師來說,這是不美觀的。網(wǎng)上有一些解決方案,但會出現(xiàn)當(dāng)改變窗口高度時,底部和正文重疊的BUG。盡管沒有多少人會有事沒事兒的去改變窗口高度,但設(shè)計嘛,追求的就是盡善盡美。
下面是我找到的一個比較完美的方法,來自國外的設(shè)計達(dá)人,純CSS,可以實現(xiàn): 當(dāng)正文內(nèi)容很少時,底部位于窗口最下面。當(dāng)改變窗口高度時,不會出現(xiàn)重疊問題。
甚至,創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案。不知道他有沒有去申請專利:)
代碼寫法
HTML代碼:
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> &l