Bila isi dari web terlalu sedikit maka footer akan naik ke atas setelah bagian isi selesai ditampilkan. Tentu saja tampilan web akan kurang menarik apalagi pada monitor yang besar. Teknologi CSS saat ini memungkinkan untuk memaksa footer selalu berada pada bagian bawah halaman.

Berikut ini langkahnya

  1. Buatlah bagan <html>  seperti ini :
  2. <div id="container">
       <div id="header"></div>
       <div id="body"></div>
       <div id="footer"></div>
    </div>
    
  3. Kemudian ini CSS-nya
  4. html,
    body {
       margin:0;
       padding:0;
       height:100%;
    }
    #container {
       min-height:100%;
       position:relative;
    }
    #header {
       background:#ff0;
       padding:10px;
    }
    #body {
       padding:10px;
       padding-bottom:60px;   /* sesuaikan dengan tinggi footer */
    }
    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:60px;   /* tinggi dari footer */
       background:#6cf;
    }
    

Sip footer akan selalu berada diposisi bawah. Kode lengkap donwload disini