Bu yazımda web uygulamaları geliştirirken karşılaştığım genel bir durumu, basit bir örnekle açıklamak istiyorum. Bazı durumlarda tasarımın yapısı gereği bir blok elemana minimum yükseklik atamamız gerekir.

Arka planı olan bir alanımız var ve üzerine yazı getireceğiz. Buradaki sorun eğer içerik yazısı, arka plan imajını gösterecek kadar alanı genişletemezse, imajımızı kesik görürüz.

Önce XHTML’i hazırlayalım;

<div id="Kutu">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Sed aliquet porttitor libero. Duis accumsan. Nulla hendrerit elit
    nec nibh. Sed vestibulum accumsan pede.</p>
</div>

Sonrasında CSS ile hızlıca kutumuzu şekillendirelim…

div#Kutu {
	background:url(kutubg.jpg) no-repeat center top;
	padding:10px;
	width:166px;
}

div#Kutu p{
	font-weight:bold;
}

Elde ettiğimiz sayfayı buradan görebilirsiniz. Şimdi sorun şu; eğer yazı yeterince uzun olmazsa arka plan imajını göremiyoruz. Bu duruma buradan bakabilirsiniz. Sorunu düzeltmek CSS height özelliğini kullanmayı deniyoruz.

div#Kutu {
	background:url(kutubg.jpg) no-repeat center top;
	height:197px; /* Height */
	padding:10px;
	width:166px;
}

div#Kutu p{
	font-weight:bold;
}

Burada sorun çözülmüş gibi görünüyor, fakat bu sefer de eğer paragraf içerisindeki yazı daha uzun olursa sorun oluşuyor. Bu durumu daha net görebilmeniz için kutuya arka plan rengi verdim.

div#Kutu {
	background:#ccc url(kutubg.jpg) no-repeat center top; /* ArkaPlan Rengi */
	height:197px; /* Height */
	padding:10px;
	width:166px;
}

div#Kutu p{
	font-weight:bold;
}

Sizin de burada gördüğünüz gibi kutu elemanının, içindeki elemanları kapsayamama sorunu var. Sorunlu tarayıcımız IExplorer 6‘da böyle bir sorun görünmüyor.

Bu sorunu Firefox, Opera gibi standart uyumlu bir tarayıcı kullanıyorsanız göreceksiniz. Sorunu çözebilmek için div etiketi için min-height özelliğini kullanıyoruz ve height özelliğini de kaldırıyoruz.

div#Kutu {
	background:#ccc url(kutubg.jpg) no-repeat center top;
	min-height:197px; /* Minimum Height */
	padding:10px;
	width:166px;
}

div#Kutu p{
	font-weight:bold;
}

Bu durumda ise eğer kutu içindeki içerik kısa olursa, IExplorer6 tarafından algılanmıyor. IExplorer’daki kesilmeyi engelleyebilmek için min-height ve height ‘ı birlikte kullanmayı deniyoruz.

div#Kutu {
	background:#ccc url(kutubg.jpg) no-repeat center top;
	min-height:197px; /* Minimum Height */
	height:197px; /* Height */
	padding:10px;
	width:166px;
}

div#Kutu p{
	font-weight:bold;
}

Fakat burada standart uyumlu tarayıcımız height özelliğini algıladığı için uzun metinlerde yine kapsayamama sorunu yaşamaktayız. Burada durumu görmektesiniz.

Bu sorunu tamamen ortadan kaldırabilmek için height:auto !important; özelliğini uygulayacağız. Bu özelliği kullanarak standart uyumlu tarayıcımıza “IExplorer için tanımladığımız yüksekliği kullanma, içeriğe göre otomatik ayarla demiş oluyoruz. !important işaretini gören uyumlu tarayıcımız o anda başka bir height tanımlaması olsa da, bunu dikkate almayacaktır.

Burada dikkat etmemiz gereken bir nokta; height:auto !important; özelliğini koyacağımız yere dikkat etmemiz gerekiyor. Örneğin şu şekilde kullanırsak;

div#Kutu {
	background:#ccc url(kutubg.jpg) no-repeat center top;
	min-height:197px;  /* Minimum Height */
	height:197px; /* Önce Height */
	height:auto !important; /* Sonra Height Auto !important */
	padding:10px;
	width:166px;
}

IE6 önce yüksekliğe sabit bir değer atayacak, sonra ise height:auto; özelliğini gördüğünde yine içeriğe göre yüksekliği ayarlayacaktır. Buradan bakabilirsiniz. Bu yüzden height:auto !important; özelliğini height:197px; özelliğinden önce tanımlayarak sorunu tamamen çözüyoruz.

Uygulamanın son haline buradan ulaşabilirsiniz.

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.