Membuat height 100% sesuai tinggi monitor dengan css kadang menjadi kendala bagi sebagian web designer, namun sebenarnya trik nya sangat mudah, hanya mereka kurang mengerti trik nya saja. Atau bisa jadi tidak peduli dengan semua tag yang ada di html.
Ada pertanyaan di forum yang menanyakan dia membuat desain sudah sangat baik, sudah sesuai dengan tinggi monitor di layar 1366px x 768px, sudah tampil dengan sangat baik, namun karena website nya akan dibuka di layar dengan resolusi 3840px x 2160px jadi tinggi nya tidak sesuai dan website jadi berantakan, menyisakan space di bagian bawahnya, walaupun lebarnya telah sesuai karena sudah menggunakan fluid atau menggunakan persen (100%).
Nah kenapa tingginya tidak sesuai?
Karena dibuat di resolusi 1366px x 768px maka tidak akan sesuai di layar lebih besar atau akan kurang baik juga jika dibuka di layar yang lebih kecil.
Kebiasaan web designer yaitu tidak terlalu memikirkan tinggi dari tag html dan body, padahal disitulah letak kesalahan nya. Mereka hanya fokus pada tinggi tag (elemen) yang ada di dalam body, seperti header dan content misal nya, jadi coba perhatikan struktur berikut.
Kalau diperhatikan disitu jika kita ingin membuat website fullscreen dengan menggunakan persen (%), kita harus ingat kalau semua tag itu default nya memiliki properti height: auto.
Jadi jika ingin membuat .header
, dan .main
menjadi fullscreen maka kita harus membuat html
dan body
menjadi 100% terlebih dahulu, barulah kita atur tag yang didalam body sesuai dengan yang diinginkan.
CSS Yang SALAH: Biasanya banyak yang menggunakan css seperti dibawah ini saja sehingga hasilnya tidak sesuai yang diharapkan, walupun height di .header
dan .main
menjadi 10% dan 90%, hal tersebut tidak berfungsi karena html
dan body
masih secara default memiliki nilai auto, bukan 100%.
CSS YANG BENAR: Maka css yang seharusnya digunakan kira-kira seperti ini, dimana pada html
dan body
diberi height:100%;
Disitu bisa dilihat kalau html dan body dibuat dengan tinggi 100% (height:100%)
barulah kita bisa leluasa menentukan tingi untuk elemen-elemen didalam tag body. Bisa dilihat disitu sebagai contoh .header
dibuat dengan tinggi 10% dan .main dengan tinggi 90%.
Maka hasil yang akan kita dapat bisa dilihat di demo berikut ini, bisa dibandingkan hasilnya.
Bagaimana Jika Konten Terlalu Panjang & Ada Footernya
Jika konten di CLASS .main terlalu panjang sedangkan kita ingin ada footernya maka kita sesuaikan dulu tinggi .header, .main, dan .footernya.
Contoh:
.header: 10%;
.main: 85%
.footer: 5%
TOTAL = 100%
dan untuk konten yang terlalu panjang maka kita perlu memberikan overflow-y: scroll
pada class .main
agar isi dari CLASS .main
akan memunculkan scroll vertical dan konten tidak melebihi / melewati footer.
Contoh HTML
CSS
Berbagai Cara
Masih banyak cara lain sebenarnya, bisa dengan javascript, mungkin juga dengan css display table, namun ini hanya salah satu contoh saja.
Hasil
Demo Salah | Demo Benar | Demo + Konten + Footer
Untuk source code nya silahkan Klik Kanan + View Source
Sekian
Sekian tutorial kali ini, semoga membatu mencerahkan kesulitan anda.
Salam web design indonesia
Mantaaaffff :D
keren kaka :D
wah mantap banget…
wah hebat banget kaka cara belajar nya gimana sih ….?
om cara ini, kalau digunakan untuk semua media bisa ga’, seperti HP, Tablet, PC, mohon pencerahnya
bisa
lah kan header,main,footer udah sratus kang (40,50,10),tapi footernya gak mau turun knapa kang ? jadi footernya nempel ke mainnya
Mantap kang tutornya…
terima kasih
kalo semisal di bagian mainnya dikasih background 1280 x 800, nanti jika di buka dengan layar yang resolusinya lebih kecil apakah bisa ?
thanks gan ^_^
Luar biasa & sangat mebantu ,,, terima kasih banyak atas pencerahanx
Success Selalu
header 300px
sisanya nya buat main tapi secara total jadi 100%
itu gimana ya
nice tutorial, oia om mau tanya.
trik tsb bisa di implementasikan di web html single page tidak? jadi khusus bagian awal aja (tampilan paling atas fullscreen), soalnya saya coba engga work om :(
saya jadiin homepage 100%, logo 90%, nav 10%.
…..
HTML bisa diterapkan di semua halaman web, karena halaman web emang dibuat dengan html dan css
Wah keren , sangat lengkap dan sesuai dengan yang saya harapkan tutorialnya . jempol .
makasi bro
thanks gan, sangat bermanfaat. terus berkarya..!!
Ijin bookmark gan, ini lagi saya cari-cari, tapi masih belum paham, hehehe… Terima kasih tutornya, sangat membantu.
Klo untuk font bagaimana ka, agar bisa menyesuaikan layar supaya tidak terlalu besar dan kecil
keren gan..tutorialnya di mengerti
nice share gan, izin praktek
infonya bermanfaat, cuma ada yg mau saya tanyakan, ketika di pc dan tablet header sy normal auto respon, cuma pas di buka di hp yg lebih kecil seperti android tidak ada gambarnya walau di miringin juga hp nya, salahnya dimana ya
kalau di tambahkan satu lagi untuk konten sidebar disamping content gimana tu gan????