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