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

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

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

TWD Editorial

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

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

Heru says:

June 11, 2013 at 17:04

Mantaaaffff :D

tommy says:

June 11, 2013 at 23:03

keren kaka :D

arif says:

June 15, 2013 at 21:55

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

kakang` says:

June 17, 2013 at 13:25

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

TWD Editorial says:

June 17, 2013 at 13:48

bisa

Reply

Sachroni Gumilar says:

September 30, 2013 at 22:38

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

Fajar says:

January 3, 2014 at 08:13

Mantap kang tutornya…
terima kasih

didin says:

June 17, 2014 at 03:42

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

cahyo says:

August 8, 2014 at 10:08

thanks gan ^_^

Belo says:

September 30, 2014 at 10:23

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

Success Selalu

budi says:

November 28, 2014 at 14:29

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

itu gimana ya

gunadi says:

December 15, 2014 at 12:41

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

…..

TWD Editorial says:

December 15, 2014 at 19:13

HTML bisa diterapkan di semua halaman web, karena halaman web emang dibuat dengan html dan css

Reply

kizeh says:

September 12, 2015 at 18:08

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

Endy says:

December 6, 2015 at 19:35

makasi bro

Ocy says:

April 8, 2016 at 00:51

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

FIRST MEDIA says:

October 3, 2016 at 01:16

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

Pasti says:

March 6, 2017 at 07:12

Klo untuk font bagaimana ka, agar bisa menyesuaikan layar supaya tidak terlalu besar dan kecil

iim said sabiq says:

March 7, 2017 at 17:30

keren gan..tutorialnya di mengerti

Promo First Media Paket says:

October 13, 2017 at 14:09

nice share gan, izin praktek

zeta says:

March 6, 2018 at 04:48

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

fadixz says:

April 5, 2018 at 10:44

kalau di tambahkan satu lagi untuk konten sidebar disamping content gimana tu gan????

Tutorial Web Design

Topik

Tags