Selamat Datang

Membuat Auto Height 100% Dengan CSS (Fullscreen)

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.

Auto Height 100% Fullscreen CSS

Auto Height 100% Fullscreen CSS

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.


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Auto Height</title>
</head>
<body>
	<div class="header">
		Header
	</div>
	<div class="main">
		<div class="main-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, incidunt qui dolorem excepturi natus modi debitis voluptas nesciunt magnam adipisci possimus inventore doloribus amet quia voluptatum quas exercitationem obcaecati neque.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, laboriosam, officiis consectetur deserunt ipsam blanditiis laborum tempore ut esse exercitationem molestiae reprehenderit. Inventore, cupiditate similique vero culpa est neque fuga.</p>
		</div>
	</div>
</body>
</html>

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%.


	*{
		padding: 0;margin: 0;
	}
	.header{
		height: 10%;
		background: red;
	}

	.main{
		height: 90%;
		background:yellow;
	}
		.main-content{
			padding: 20px;
		}

CSS YANG BENAR: Maka css yang seharusnya digunakan kira-kira seperti ini, dimana pada html dan body diberi height:100%;


	*{
		padding: 0;margin: 0;
	}
	html, body{
		height: 100%;
	}
	.header{
		height: 10%;
		background: red;
	}

	.main{
		height: 90%;
		background:yellow;
	}
		.main-content{
			padding: 20px;
		}

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.

DEMO Salah | Demo Benar


Bagaimana Jika Konten Terlalu Panjang & Ada Footernya

Demo 1, Demo 2, Demo3

Demo 1, Demo 2, Demo3

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


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Auto Height</title>
</head>
<body>
	<div class="header">
		Header
	</div>
	<div class="main">
		<div class="main-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, incidunt qui dolorem excepturi</p>
			...
			...
			...
			...
		</div>
	</div>
	<div class="footer">
		Footer
	</div>
</body>
</html>

CSS

	*{
		padding: 0;margin: 0;
	}
	html, body{
		height: 100%;
	}
	.header{
		height: 10%;
		background: red;
	}

	.main{
		height: 85%;
		background:yellow;
		overflow-y: scroll;
	}
		.main-content{
			padding: 20px;
		}
	.footer{
		height: 5%;
		background: orange;
	}

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

17 thoughts on “Membuat Auto Height 100% Dengan CSS (Fullscreen)

  1. Heru says:

    Mantaaaffff :D

  2. tommy says:

    keren kaka :D

  3. arif says:

    wah mantap banget…
    wah hebat banget kaka cara belajar nya gimana sih ….?

  4. kakang` says:

    om cara ini, kalau digunakan untuk semua media bisa ga’, seperti HP, Tablet, PC, mohon pencerahnya

  5. Sachroni Gumilar says:

    lah kan header,main,footer udah sratus kang (40,50,10),tapi footernya gak mau turun knapa kang ? jadi footernya nempel ke mainnya

  6. Fajar says:

    Mantap kang tutornya…
    terima kasih

  7. didin says:

    kalo semisal di bagian mainnya dikasih background 1280 x 800, nanti jika di buka dengan layar yang resolusinya lebih kecil apakah bisa ?

  8. cahyo says:

    thanks gan ^_^

  9. Belo says:

    Luar biasa & sangat mebantu ,,, terima kasih banyak atas pencerahanx

    Success Selalu

  10. budi says:

    header 300px
    sisanya nya buat main tapi secara total jadi 100%

    itu gimana ya

  11. gunadi says:

    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%.

    …..

  12. kizeh says:

    Wah keren , sangat lengkap dan sesuai dengan yang saya harapkan tutorialnya . jempol .

  13. Ocy says:

    thanks gan, sangat bermanfaat. terus berkarya..!!

  14. FIRST MEDIA says:

    Ijin bookmark gan, ini lagi saya cari-cari, tapi masih belum paham, hehehe… Terima kasih tutornya, sangat membantu.

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development