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
