CSS Min height property tak jauh berbeda dengan CSS min-width property. Jika pada min-width property digunakan untuk menentukan lebar minimal sebuah obyek/elemen, maka min-height property digunakan untuk menentukan tinggi minimal obyek/elemen. Value/nilai min-height property akan membuat sebuah elemen/obyek mempunyai batas minimal tinggi tertentu (sesuai nilai yang digunakan) hingga ketinggian yang tidak terbatas (jika tinggi tidak dibatasi dengan css max-height property). Jika anda menghendaki elemen mempunyai batas tinggi maksimal tertentu, anda bisa menambahkan css overflow property (mislanya » overflow: auto).
Value/nilai CSS min-height property
Ada beberapa satuan nilai yang bisa digunakan untuk menentukan min-height property:- px, em, pt, cm ,...dll (length)
- % (persen) » prosentase nilai min-height property diperhitungkan dengan ketinggian elemen yang ditempati.
- inherit
Contoh :
min-height: 100px; min-height: 20em; min-height: 80%; min-height: inherit;
contoh penggunaan min-height property dalam elemen
<style type="text/css">
.mybox {
width: 400px;
min-height: 100px;
padding: 10px;
background: #333;
color: #fff;
border: 2px solid #999;
font: normal 14px Arial;
}
.myimage {
width: auto;
min-height: 150px;
max-height: 250px;
border: 6px solid #666;
border-radius: 8px;
float:left;
margin: 0 12px 5px 0;
}
</style>
<div class="mybox"> Content here! </div>
<img src="image.jpg" alt="kucing hitam" />Edit kode dalam box demo di bawah ini untuk mengetahui lebih jelas fungsi CSS min-height property. Anda dapat menambahkan beberapa CSS property lain untuk mendapatkan bentuk elemen sesuai dengan yang diharapkan
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar