CSS fungsi Property Min-Height serta Valuenya

min-height ini hampir sama dengan property height, bedanya fungsi dari min-height hanya mengatur tinggi minimal saja, jadi jika style yang kita buat isinya bertambah maka tingginya akan bertambah juga

Tegas berbeda jauh dengan kejam. Tegas itu mantap dalam kebijaksana sedangkan kejam itu keras dalam kesewenang-wenangan

min-height ini hampir sama dengan property height, bedanya fungsi dari min-height hanya mengatur tinggi minimal saja, jadi jika style yang kita buat isinya bertambah maka tingginya akan bertambah juga

Last Modif at July 10th, 2011

min-height(ID tinggi minimal) ini hampir sama dengan property height, bedanya fungsi dari min-height hanya mengatur tinggi minimal saja, jadi jika style yang kita buat tingginya(bisa juga isi) bertambah, maka tag yang kita bentuk dengan style min-height tadi akan bertambah tinggi!?

ini berbeda dengan property height, jika kita mengisinya maka(akan) tingginya tetap sperti itu. biasanya min-height ini digunakan untuk sidebar(pembentuk) agar tinggi badan post dan sidebarnaya rata!

value min-height

berikut value min-height

  • none
  • length(px, in, em)
  • (percent)%
  • inherit

min-height:none;

anggap saja value none ini sama dengan(tanpa style min-height)

min-height:length(px, in, em)

value length ini bisa kita tentukan tinggi minimalnya, pilihanya beragam seperti px, in dan em. saya pribadi lebih suka memakai length(dalam px)

min-height:percent(%)

misal resolusi monitor anda 1200px, lalu anda membuat style body dengan min-height 100% maka sama dengan 1200px(semua orang juga tahu).

perlu diingat percent(%) mengambil nilai dari style sebelumnya(firefox, opera). misal style sebelumnya nilai heightnya 300px, lalu style didalamnya min-height:50%, maka style(min-height) yang didalamnya sama dengan 150px(dapat bertambah). dan jika sobat berpikir seperti itu, akan bernilai berbeda pada(internet exploler). ie membuat designer web menderita!

min-height:inherit

saya ngga pernah menggunakan!(ngga support di ie)

contoh property min-height dalam internal style

perhatikan code markup style dibawah!

<html>
<head>
<title>css min-height</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#bentuk-pertamabentuk-pertama{float:left;
background-color:red;
width:100px;
min-height:100px;
margin:5px;
}
#bentuk-kedua{
float:left;
background-color:red;
width:200px;
min-height:100px;
margin:5px;
}
#bentuk-ketiga{
float:left;
background-color:red;
width:300px;
min-height:100px;
margin:5px;
}
#bentuk-keempat{float:left;
background-color:red;
width:6in;
min-height:100px;
margin:5px;
}
#bentuk-kelima{
float:left;
background-color:red;
width:50em;
min-height:100px;
margin:5px;
}
#bentuk-keenam{
float:left;
background-color:red;
width:20%;
min-height:100px;
margin:5px;
}
</style>
</head>
<body>
<div id="bentuk-pertamabentuk-pertama">
coba diisi
</div>
<div id="bentuk-kedua">
bentuk-kedua coba diisi
bentuk-kedua coba diisi
bentuk-kedua coba diisi
bentuk-kedua coba diisi
bentuk-kedua coba diisi
bentuk-kedua coba diisi
bentuk-kedua coba diisi
</div>
<div id="bentuk-ketiga">
bentuk-ketiga coba diisi
</div>
<div style="clear:both;/**/"></div>
<div id="bentuk-keempat">
bentuk-peempat coba diisi
</div>
<div id="bentuk-kelima">
bentuk-kelima coba diisi
</div>
<div id="bentuk-keenam">
bentuk-kenam coba diisi
</div>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohcssmin-height.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)

keterangan

  • setelah dijalankan, coba isi dengan text pada (coba diisi)
  • entar tingginya akan bertambah!
  • selamat belajar

References

http://www.w3.org/Style/CSS

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “CSS fungsi Property Min-Height serta Valuenya”

  1. resti :D says:

    nice bgt webnya :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-