myNotlar Logo

maxHeight


Internet Explorer 7 Firefox Opera 3.5

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ç

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.

İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |