Footer tetap di bawah
Kadang kala kita ingin membuat halaman web dimana footer selalu tampil di paling bawah walaupun isi halaman web kurang dari 1 halaman atau juga isinya lebih dari 1 halaman sehingga muncul scrollbar.
Untuk membuat footer tetap berada di bawah, kita bisa buat dengan coding HTML dan CSS sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat footer tetap di bawah</title>
<style>
html,body{margin:0;padding:0;height:100%;font:13px Arial;}
#wrapper{min-height:100%;position:relative;}
#header{background:#f0f0f0;padding:5px;height:50px;color:#0000ff;}
#body{padding-bottom:40px;padding-left:10px;}
#footer{background:#f0f0f0;position:absolute;bottom:0;width:100%;
text-align:center;color:#808080;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Membuat footer tetap di bawah</h1></div>
<div id="body">
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
<div id="footer"><p>Copyright &copy; 2014 - All Rights Reserved</p></div>
</div>
</body>
</html>
Anda bisa kembangkan coding tersebut untuk membuat layout web 2 kolom dan seterusnya.
Selamat mencoba, semoga berhasil.