Membuat footer tetap dibawah jika isi Konten pendek atau kosong

Pada beberapa kasus layout halaman dimana posisi footer akan mengikuti tinggi layout bagian atas . jika konten terisi penuh dengan tinggi layar hal seperti itu tidak akan kita sadari. Namun pada beberapa media mobile akan terlihat perbedaanya. bagi pemula yang baru saja belajar tata letak web rasanya hal ini akan terabaikan. untung saja css memiliki tata letak dengan Flexbox,meski agak sulit untuk memahaminya tapi kalau kita tahu masing-masing fungsi element pada flex akan lebih mudah mereapkannya. saat ini flexbox hampir semua browser terbaru mendukung(support). (abaikan jika masih menggunakan browser lama ) browser support flexbox - www.w3.org/TR/css-flexbox-1/

Penggunaan float masih sering di gunakan. dengan CSS Flexbox float bisa saja di abaikan karena flex bisa memposisikan item,mengatur lebar/panjang item dengan ketentuan bahwa item tersebut dalam wadah yang sama.
Kali ini saya hanya akan memberikan tutorial cara membuat footer tetap di bawah (abaikan penggunaan absolute/fixed posisi) karena itu berbeda penggunaan.

Sebelum memulai pernahkan kalian mengalami seperti ini ? inilah yang akan di bahas bagaimana menyelesaikannya.


Anggap saja kalian memiliki HTML seperti ini.

<div class="wrapper"> <!-- bungkus semua item dengan flex-->
<header class="header-wrapper">
  <h1>Header</h1>
</header>
<div class="main-wrapper"> <!-- bungkus area flex-grow -->
<div class="main"> <!-- flex baru jika mempunyai sidebar-->
  <article>
    Artikel
  </article>
  <aside>
    sidebar
  </aside>
</div><!-- end main-->
</div> <!-- end main-wrapper-->

<footer class="footer-wrapper">

</footer>
</div><!-- end wrapper-->

CSS flex sebagai wadah semua item seperti ini.

.wrapper{
    background:#ddd;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh; /* menyesuaikan dengan tinggi layar*/
    height:100%;
}
.main-wrapper{
  width:100%;
  overflow:hidden;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

CSS area flexbox baru untuk class .main

.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:flex;
}
article{
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width:70%;
  background:#9b9b9b;
}
aside{
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width:30%;
  background:#1b96bc;
}

CSS di atas saya gunakan agar Sidebar sama tinggi dengan area content atau sebaliknya, ketahui lebih tentang flex-direction,flex-shrink,flex-grow - (flex Guide).
maka hasil dari CSS akan seperti gambar di bawah. namun masih ada area kosong. itu terjadi ketika pembungkus pada class .main-wrapper dan .main tidak mempunyai ketinggian (height) yang sama atau sama sekali tidak mempunyai ketinggian atau height:auto;


untuk mengatasinya masukan masing-masing height dengan nilai 100%.

.main-wrapper{
  height: 100%;
}
.main {
  height: 100%;
}

maka hasilnya seluruh area pada content selain header/footer akan memyesuaikan tinggi dengan layar yang terlihat jika content tersebut benar-benar kosong(blank).


Seluruh CSS Flexbox seperti berikut :

.wrapper {
    box-sizing:border-box;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    margin:0 auto;
    min-height:100vh;
    background:#ddd;
    position:relative;
    overflow:hidden;
    height:100%;
}
.main-wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
    flex-grow:1;
}
.main {
    height:100%;
    margin:0 auto;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
article {
    -webkit-flex-grow:1;
    flex-grow:1;
    width:70%;
    background:#9b9b9b;
}
aside {
    -webkit-flex-shrink:0;
    flex-shrink:0;
    width:30%;
    background:#1b96bc;
}
.header-wrapper {
    background:#363c44;
    width:100%;
}
.footer-wrapper {
    background:#363c44;
    margin-top:auto;
}

Bonus !!! ^_^
Pengaturan Layout responsive pada lebar tertentu. saya berikan contoh pada layar berukuran 768px.
atur CSS pada tag .main dengan menambahkan flex-direction jika layar menyentuh lebar @media (max-width: 768px) screen ubah .main menjadi column vertical.

/* responsive */
@media (max-width:768px) {
    .main {
        height:100%;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -webkit-flex-direction:column;
        -ms-flex-direction:column;
        flex-direction:column;
    }
    article,aside {
        width:100%;
    }
}

Contoh lengkap langsung lihat demo dan source code

View Demo
or
Download