這個範例規劃可以完全使用 CSS 來排版，正常的排版方式從上方開始，需要用到的技巧有 <DIV> 標籤的寬度與高度，另外還有 float 語法的設計，整個範例講解完篇幅可能會有點長（應該是超級長），所以我們不要每個區塊去設定，既然只是要設定 Footer 置底，就用一個很簡單的方式，無論上方的區塊高度是怎麼樣，Footer 都是置底的狀態。
假設我們的網頁區塊是這樣分佈
<div id="Site Name">Site Name</div>
<div id="Main">Main: Sidebar + Content</div>
<div id="Footer">Footer</div>
為了簡化範例，這裡我們就把 Sidebar 與 Content 整合為 Main 區塊來說明。要讓 Footer 區塊置底的方法，需要從 Main 開始設定，概念就是 Main 區塊設定一個底下的內距（padding-bottom），將空間預留出來給 Footer 區塊使用，而 Footer 距離上方負的固定外距（margin-top），位置需使用相對位置（relative），這樣 Footer 才會遞補上去 Main 區塊所預留的空間，如下示範：<div id="Main">Main: Sidebar + Content</div>
<div id="Footer">Footer</div>
#Main {
padding-bottom: 100px;
}
#Footer {
height: 100px;
position: relative;
margin-top: -100px;
}
範例中的 Main 區塊，我們設定了一個底內距（padding-bottom）100px ，則 Main 區塊會在底部預留一個 100px 距離的空間，接著把 Footer 的高度設定為 100px、採用相對位置（position: relative），上方外距（margin-top）設定 100px，等於是讓 Footer 遞補上去 Main 的空缺，如此一來 Footer 自然就會接在 Main 區塊下方，呈現置底狀態囉！padding-bottom: 100px;
}
#Footer {
height: 100px;
position: relative;
margin-top: -100px;
}
延伸閱讀
CSS margin 屬性與用法範例
CSS padding 內距屬性與用法範例