當(dāng)做一個頁面時，如果頁面內(nèi)容很少，不足于填充一屏的窗口區(qū)域，按普通的布局，就會出現(xiàn)下面圖片中的樣子(也就是底部內(nèi)容并沒有位于窗口的底部，而留下了大量空白。

對于追未完美的設(shè)計師來說，這是不美觀的。網(wǎng)上有一些解決方案，但會出現(xiàn)當(dāng)改變窗口高度時，底部和正文重疊的BUG。CSS設(shè)計絕對完美的網(wǎng)頁底部,盡管沒有多少人會有事沒事兒的去改變窗口高度，但設(shè)計嘛，追求的就是盡善盡美。

面是我找到的一個比較完美的方法，來自國外的設(shè)計達(dá)人，純CSS，可以實現(xiàn): 當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。當(dāng)改變窗口高度時，不會出現(xiàn)重疊問題。

HTML代碼:

<div id="wrap">
 <div id="main" class="clearfix">
  <div id="content">
  </div>
  <div id="side">
  </div>
 </div>
</div>
<div id="footer">
</div>

深圳網(wǎng)站建設(shè)使用這個布局的前提，就是footer要在總的div容器之外，footer使用一個層，其它所有內(nèi)容使用一個總的層。如果確實需要到添加其它同級層，那這個同級層就必須使用position:absolute進(jìn)行絕對定位。

下面是主要的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;}