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.com" 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.com" 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
