Komponen footer merupakan komponen yang wajib ada dalam sebuah web maupun blog. Pada Footer inilah biasanya developer web menempatkan Copy Right atas karya mereka. Namun terkadang keberadaan footer justru menjadi blunder kecil bagi para developer. Kadang penempatan footer justru mengikuti Konten yang ada. Padahal ini membuat tampilan website menjadi kurang "Proporsional" seperti contoh berikut ini.
Gambar 1
Tampilan yang seperti itu menyisakan bagia bawah yang tidak terpakai. Jadi pada kesempatan kali ini kita akan membahas tentang Cara Membuat Footer Tetap Berada di Bawah dengan CSS. Pada dasarnya cara ini hanya menggunakan class yang diset poritionnya menjadi absolute dan relative. Untuk lebih jelasnya bisa di lihat di script HTML berikut ini :
<html>
<head>
<title>Belajar-PHP</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<div class="header"><h2>Belajar-PHP</h2></div>
<div class="content">
<!--Sobat bisa gunakan Text Lorem Ipsum disini-->
</div>
<div class="footer">
Copyright by Dwi Febriandaru
</div>
</div>
</body>
</html>
<head>
<title>Belajar-PHP</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<div class="header"><h2>Belajar-PHP</h2></div>
<div class="content">
<!--Sobat bisa gunakan Text Lorem Ipsum disini-->
</div>
<div class="footer">
Copyright by Dwi Febriandaru
</div>
</div>
</body>
</html>
Dan Script CSS berikut ini :
*{margin: 0px auto;}
html,body{
height: 100%;
}
#container{
position: relative;
}
.header{
background: #0cf;
padding: 10px;
}
.content{
padding: 10px;
}
.footer{
width: 100%;
height: 50px;
padding-left: 10px;
line-height: 50px;
background: #333;
color: #fff;
}
html,body{
height: 100%;
}
#container{
position: relative;
}
.header{
background: #0cf;
padding: 10px;
}
.content{
padding: 10px;
}
.footer{
width: 100%;
height: 50px;
padding-left: 10px;
line-height: 50px;
background: #333;
color: #fff;
}
Dua Script diatas bila dieksekusi akan menghasilkan tampilan seperti pada gambar 1.
Nah, Untuk membuat footer tetap berada di bawah meski konten tidak penuh kita perlu menambah atribut min-height pada "container" dan membuat class "footer" menjadi fixed (ditambah atribut position:absolute dengan bottom 0px). Jadi script utuhnya akan menjadi seperti dibawah ini.
*{margin: 0px auto;}
html,body{
height: 100%;
}
#container{
min-height: 100%;
position: relative;
}
.header{
background: #0cf;
padding: 10px;
}
.content{
padding: 10px;
}
.footer{
width: 100%;
height: 50px;
padding-left: 10px;
line-height: 50px;
background: #333;
color: #fff;
position: absolute;
bottom: 0px;
}
html,body{
height: 100%;
}
#container{
min-height: 100%;
position: relative;
}
.header{
background: #0cf;
padding: 10px;
}
.content{
padding: 10px;
}
.footer{
width: 100%;
height: 50px;
padding-left: 10px;
line-height: 50px;
background: #333;
color: #fff;
position: absolute;
bottom: 0px;
}
Dan Tampilannya akan menjadi seperti berikut ini
Tampak lebih rapi,bukan ?.
Nah sepertinya cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Footer Tetap Berada di Bawah dengan CSS.
Jangan lupa klik tombol share bila artikel ini bermanfaat bagi kalian. Dari saya cukup sekian, mohon maaf apabila ada salah kata dan terima kasih atas perhatiannya.
Happy Coding !!!
Wassalamu'alaikum Wr.Wb
makasih admin
ReplyDeleteyou're welcome
DeleteDwi Febriandaru Site: Cara Membuat Footer Tetap Berada Di Bawah Dengan Css >>>>> Download Now
Delete>>>>> Download Full
Dwi Febriandaru Site: Cara Membuat Footer Tetap Berada Di Bawah Dengan Css >>>>> Download LINK
>>>>> Download Now
Dwi Febriandaru Site: Cara Membuat Footer Tetap Berada Di Bawah Dengan Css >>>>> Download Full
>>>>> Download LINK o1
Bagus tutorilanya, menggunkanan gambar juga, jadi lebih mudah dalam prakteknya..
ReplyDeleteiya,..
Deletethanks,gan..
maksih bos
ReplyDeletemakasih bos, simple sederhana dan mujarap
ReplyDeleteThanks bro, gw jadi tertolong
ReplyDeleteThanks mas, artikel nya sangat membantu.
ReplyDeleteSalam....
mantab banget gan
ReplyDeleteflux pasta
terimakasih broo izin copas kodenya
ReplyDeletemonggo,.. silahkan
DeleteTRimss
ReplyDeleteSama-sama gann
Deleteterimakasih sangat membatu sekali
ReplyDeleteMantap tutorialnya, btw teks yang di footer bisa dipindah ketengah?
ReplyDeleteTambahin
Deletetext-align: center;
Thanks gans
ReplyDeleteTerimakasih banyak gan. Saya sangat terbantu
ReplyDeleteDwi Febriandaru Site: Cara Membuat Footer Tetap Berada Di Bawah Dengan Css >>>>> Download Now
ReplyDelete>>>>> Download Full
Dwi Febriandaru Site: Cara Membuat Footer Tetap Berada Di Bawah Dengan Css >>>>> Download LINK
>>>>> Download Now
Dwi Febriandaru Site: Cara Membuat Footer Tetap Berada Di Bawah Dengan Css >>>>> Download Full
>>>>> Download LINK