Belajar Kode CSS & Desain Blog: Kode CSS max-height property

CSS max-height property berfungsi untuk menentukan tinggi maksimal sebuah obyek/elemen html. Tinggi maksimal yang dikehendaki ditentukan melalui sebuah nilai dalam bentuk:

px, em, pt, cm, ... etc (length)
% (persen) » : prosentase tinggi obyek/elemen diperhitungkan thd elemen/obyek lain yang ditempati.
inherit

Deklarasi max-height property

Beberapa contoh deklarasi max-height property:

min-height: 100px;
min-height: 20em;
min-height: 80%;
min-height: inherit;

Contoh max-height property dalam elemen html

<style type="text/css">
p{
    padding:10px;
    max-height: 100px;
    overflow: auto;
}
.post-body img{
    width: auto;
    border: none;
    padding: 8px;
    max-height: 200px;
    box-shadow: 4px 4px 4px #000;
    border-radius: 6px;
}
</style>

<p> Content here!</p>

<div class="post-body">
    <img src="image.jpg" alt="my image" />
</div>

Edit kode dalam box demo di bawah ini untuk mengetahui lebih jelas fungsi CSS max-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!

<!DOCTYPE html>
<html>
<title>CSS max-height Property</title>
<head>
<style type="text/css">
#konten{margin:15px 5px;padding:20px;background:#eee;box-shadow:0 0 20px #555;border-radius:6px;}
h2{padding-bottom:5px;color:green;margin:3px 0;border-bottom:5px double #444;}
.clear{clear:both;}
</style>

<!-- CSS demo -->

<style type="text/css">
p.maxheight{
    max-height: 100px;
    overflow: auto;
    padding:12px;
    text-align:justify;   
}
.mybox {
    width: 400px;
    height: 100px;
    padding: 10px;
    background: #333;
    border: 5px double #999;
    font: normal 14px Arial;
    text-align: justify;    
}
p.mycontent{
    width: 100%;
    max-height: 100%;
    overflow: auto;
    background:yellow;
    color: blue;
    margin: 0;
    padding: 0;
}
.myimage {
    width: auto;
    max-height: 120px;    
    border: 6px solid #666;
    border-radius: 8px;
    float:left;
    margin: 0 12px 5px 0; 
}
</style> 

</head>

<body>
<div id="konten">

<h2>Menggunakan CSS max-height property dan overflow property</h2>

<p class="maxheight"><img style="float:left;margin:0 12px 5px 0px;padding:6px;box-shadow:0 0 8px #666;border-radius:4px;width:100px;height:100px;border:none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aLlsFCWKv-0f-2A1AIXd_LxvMzyJ6-SrzAKryrkIAIDSGGNLfmqP9vgrwChTG7gIbfcdZYHAJUcwrPa4Nnp-SzQ-VYAQPnam7czJZbs47T-CofLnLJOjE-__BQG9L0_xaKGTYvXtCjY/s100/gambar-kucing-300x300.jpg" alt="kucing hitam - belajar kode css"/>Dengan memanfaatkan max-height property, anda dapat membatasi tinggi sebuah obyek/elemen html dalam nilai tertentu. Menambah overflow property (dg value/nilai "auto") akan membuat seluruh konten tetap bisa termonitor/terlihat, sekalipun jumlah konten sangat besar/banyak. Properti css yang lain seperti min-width property, max-width property atau min-height property serta beberapa css property yang lain bisa ditambahkan untuk mendapatkan bentuk dan ukuran atau desain yang dikehendaki. Penggunaan elemen html dengan css max-height property tak hanya dibatasi untuk teks saja namun juga bagi obyek atau elemen lainnya, seperti image.</p>

<h2>max-height property dengan nilai/value % (persen)</h2>

<div class="mybox"><p class="mycontent">Anda dapat menggunakan max-height property dengan nilai % (persen). Prosentase max-height property akan diperhitungkan berdasarkan ketinggian elemen html yang ditempati. Jika padding atau margin tidak ditambahkan, maka anda bisa menggunakan nilai max-height property hingga 100%, tetapi jika digunakan padding atau margin serta border maka anda perlu memperhitungkan berapa nilai dari ketiga variable di atas. Seperti contoh sebelumnya, anda dapat juga menambahkan beberapa properti css yang lain hingga didapatkan elemen baru seperti yang diinginkan.</p></div>

<h2>CSS max-height property pada elemen gambar/image</h2>
<img class="myimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aLlsFCWKv-0f-2A1AIXd_LxvMzyJ6-SrzAKryrkIAIDSGGNLfmqP9vgrwChTG7gIbfcdZYHAJUcwrPa4Nnp-SzQ-VYAQPnam7czJZbs47T-CofLnLJOjE-__BQG9L0_xaKGTYvXtCjY/s300/gambar-kucing-300x300.jpg" alt="kucing hitam - belajar kode css" />Dengan menambahkan CSS max-height property akan membuat setiap image ditampilkan dengan batas ketinggian maksimal tertentu (sesuai value/nilai yang digunakan). Jika property ini dipergunakan, maka sekalipun anda menggunakan image dengan ukuran yang jauh lebih besar dari nilai max-height property yang ditetapkan, maka image akan ditampilkan dengan ukuran tinggi maksimal sesuai nilai tersebut. Dalam contoh ini, image sebenarnya berukuran width=300px dan height=300px. Anda bisa melihat pada gambar di bawah!

<div style="clear:both;"></div>

<h2>Image (gambar kucing hitam) dalam bentuk dan ukuran sebenarnya:</h2>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aLlsFCWKv-0f-2A1AIXd_LxvMzyJ6-SrzAKryrkIAIDSGGNLfmqP9vgrwChTG7gIbfcdZYHAJUcwrPa4Nnp-SzQ-VYAQPnam7czJZbs47T-CofLnLJOjE-__BQG9L0_xaKGTYvXtCjY/s300/gambar-kucing-300x300.jpg" style="display:block;margin:15px auto;" alt="kucing hitam - belajar kode css"/>

</div>
</body> 
</html>

1 komentar:

Anonim24 Juli 2015 pukul 21.52
Sunggu bermanfaat tutorial css nya..

Saya juga punya tutorial css di blog kang, monggo di baca sekalian di koreksi sama akang, takutnya ada yg salah :)

Cara memilih element atau selector tertentu

http://www.wappersunda.com/cara-memilih-element-atau-selector-terte.xhtml
BalasHapus
Balasan

Tambahkan komentar

Belajar Kode CSS & Desain Blog

Halaman

Kode CSS max-height property

Deklarasi max-height property

Contoh max-height property dalam elemen html

1 komentar:

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('10.18.2012');

Kode CSS max-height property

Deklarasi max-height property

Contoh max-height property dalam elemen html

1 komentar:

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e