網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：CSS的簡(jiǎn)單在于它易學(xué)，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒(méi)有完美這種說(shuō)法。所以，現(xiàn)在介紹的CSS絕對(duì)底部，只是目前個(gè)人見(jiàn)過(guò)的方案中比較完美的吧。
CSS的簡(jiǎn)單在于它易學(xué)，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒(méi)有完美這種說(shuō)法。所以，現(xiàn)在介紹的CSS絕對(duì)底部，只是目前個(gè)人見(jiàn)過(guò)的方案中比較完美的吧。
先說(shuō)我們?yōu)槭裁磿?huì)使用到這個(gè)CSS底部布局解決方案:
當(dāng)做一個(gè)頁(yè)面時(shí)，如果頁(yè)面內(nèi)容很少，不足于填充一屏的窗口區(qū)域，按普通的布局，就會(huì)出現(xiàn)下面圖片中的樣子(也就是底部?jī)?nèi)容并沒(méi)有位于窗口的底部，而留下了大量空白。
對(duì)于追未完美的設(shè)計(jì)師來(lái)說(shuō)，這是不美觀的。網(wǎng)上有一些解決方案，但會(huì)出現(xiàn)當(dāng)改變窗口高度時(shí)，底部和正文重疊的BUG。盡管沒(méi)有多少人會(huì)有事沒(méi)事兒的去改變窗口高度，但設(shè)計(jì)嘛，追求的就是盡善盡美。
下面是我找到的一個(gè)比較完美的方法，來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。
甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案。不知道他有沒(méi)有去申請(qǐng)專利:)
代碼寫法
HTML代碼:
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
說(shuō)明: 使用這個(gè)布局的前提，就是footer要在總的div容器之外，footer使用一個(gè)層，其它所有內(nèi)容使用一個(gè)總的層。如果確實(shí)需要到添加其它同級(jí)層，那這個(gè)同級(jí)層就必須使用position:absolute進(jìn)行絕對(duì)定位。
CSS代碼:
下面是主要的CSS代碼，讓你的底部可以位于窗口的最下面:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必須使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的負(fù)值 */
height: 150px;
clear:both;}
說(shuō)明: 需要注意的就是#main的padding值、footer的高度和負(fù)margin值，需要保持一致。
就是這么簡(jiǎn)單，不過(guò)還沒(méi)完。如果你的主體是使用懸浮布局，還得解決一些瀏覽器的兼容問(wèn)題，這里使用的重點(diǎn)是為了Goolge Chrome。
對(duì)#main部份進(jìn)行著名的Clearfix Hack:
.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 */
注: 該方案測(cè)試于兩欄懸浮布局，兼容各大主流瀏覽器，包括Google Chrome。
P.S:
OK, 沒(méi)有了。如果沒(méi)看懂，具體的使用方法和說(shuō)明可以到原站查看。