maxHeight özelliği, elementin ulaşacağı en fazla yükseklik değerini belirler. Bu özelliğin IE 7+ sürümlerinde kullanılabilmesi için !DOCTYPE ile doküman tipinin tanımlanması gereklidir.
DOM Sözdizimi
element.style.maxHeight = "yukseklik"
CSS Sözdizimi
max-height: yukseklik
| yukseklik | Aşağıdaki değerleri alabilir.
- none : Yükseklik limiti olmadığını belirtir. Yükseklik içeriğe göre otomatik belirlenir.
- Yüzde değer : Elementin içinde bulunduğu ana bloğun yükseklik değerine oranlanmasıyla belirlenir.
- CSS Ölçü Değerleri : En fazla yüksekliğin, net olarak belirlenmesini sağlar.
|
Aşağıdaki örnek, sabit genişliğe sahip bir div elementinin görünen içerik yüksekliğinin maxHeight ile sınırlandırılarak overflow özelliği ile taşma kontrolünün uygulanmasını göstermektedir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
div#ornekDiv {
width:150px;
overflow: auto;
}
</style>
<script type="text/javascript">
function azGoster() {
document.getElementById("ornekDiv").style.maxHeight = "100px";
}
function ortaGoster() {
document.getElementById("ornekDiv").style.maxHeight = "200px";
}
function hepsiniGoster() {
document.getElementById("ornekDiv").style.maxHeight = "none";
}
</script>
<input type="button" value="Az Göster ( 100px )" onClick="azGoster()" />
<input type="button" value="Normal Göster ( 200px )" onClick="ortaGoster()" />
<input type="button" value="Hepsini Göster" onClick="hepsiniGoster()" />
<div id="ornekDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
Canlı Sonuç