Penulis
ARSPuja Labs - Cara Membuat Section Footer Web Berada Di Bawah Halaman Css (Not Fixed Style)
Banyak hal sepele yang di hadapi para web developer, khususnya divisi Frontend Developer.
Seperti masalah yang akan kita bahas kali ini, ada kasus yang mengharuskan footer berada di bawah. Tapi yang ada malah footer ikut naik ke atas ketika content height kurang dari 50% tinggi layar media.
Dalam artikel ini akan kami coba bahas Cara Membuat Section Footer Web Berada Di Bawah Halaman Css (Not Fixed Style). Ingat ini bukan tentang Fixed Position Style.
Untuk lebih jelasnya silahkan lihat penjelasan gambar berikut.
Dan berikut untuk detail code HTML nya.
Copy dan Paste kan di web directory anda.
Nah, itu tadi Cara Membuat Section Footer Web Berada Di Bawah Halaman Css (Not Fixed Style) silahkan coba kembangkan lagi sesuai kebutuhan anda.
# Ars, Google
Banyak hal sepele yang di hadapi para web developer, khususnya divisi Frontend Developer.
Seperti masalah yang akan kita bahas kali ini, ada kasus yang mengharuskan footer berada di bawah. Tapi yang ada malah footer ikut naik ke atas ketika content height kurang dari 50% tinggi layar media.
source: google.com
Dalam artikel ini akan kami coba bahas Cara Membuat Section Footer Web Berada Di Bawah Halaman Css (Not Fixed Style). Ingat ini bukan tentang Fixed Position Style.
Untuk lebih jelasnya silahkan lihat penjelasan gambar berikut.
source: google.com
Dan berikut untuk detail code HTML nya.
<!DOCTYPE html>
<html>
<head>
<title>Footer on Bottom Style - ARSPuja Labs</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
background: #ededed;
padding: 10px;
}
#content {
padding-bottom: 100px;
/* Height of the footer element */
}
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
#content p
{
padding:10px;
background:#222937;
color:#eee;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> Disini Header </div>
<!-- #header -->
<div id="content">
<p> Konten Disini </p>
<p> Konten Lainnya Disini</p>
</div>
<!-- #content -->
<div id="footer"> Disini Footer <br /><a href="http://arspujalabs.blogspot.com/">Visit: arspujalabs.blogspot.com</a></div>
<!-- #footer -->
</div>
<!-- #wrapper -->
</body>
</html>
Copy dan Paste kan di web directory anda.
Nah, itu tadi Cara Membuat Section Footer Web Berada Di Bawah Halaman Css (Not Fixed Style) silahkan coba kembangkan lagi sesuai kebutuhan anda.
# Ars, Google
4 komentar
terimakasih gan ini yang ane cari cari
.
Mantap dah artikelnya kawan
Nice | www.tokoumpan.com
thanks for information,.
Silahkan berkomentar dengan sopan dan tidak mengandung unsur SARA sesuai topik artikel diatas. Diluar itu komentar anda akan penulis hapus. Terimakasih :)
EmoticonEmoticon