Assalamu'alaikum Wr.Wb
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.
Dan Script CSS berikut ini :
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.
Dan Tampilannya akan menjadi seperti berikut ini
Nah sepertinya cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Footer Tetap Berada di Bawah dengan CSS.
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