Selasa, 02 Mei 2017

Membuat Section Footer Web Berada Di Bawah Halaman Css (Not Fixed Style)

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.

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


Silahkan berkomentar dengan sopan dan tidak mengandung unsur SARA sesuai topik artikel diatas. Diluar itu komentar anda akan penulis hapus. Terimakasih :)
EmoticonEmoticon