Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height)
Bir kapsayıcı kutunun genişlik değerini minimum ve maksimum değerleri ile sınarlandırabilriz. Bu özellikler CSS2 ile birlikte gelmiştir.
min-width, min-height
Yapısı : min-width, min-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok
min-width, min-height kapsayıcı kutunun minimum alacağı değerleri belirtmek için kullanırız.
p.menu {
float:left;
width:200px;
min-width:150px;
}
Internet Explorer 7+
Netscape 6+
Opera 6+
W3C’s CSS Level 2+
CSS Profile 2.0
Aynı şekilde max-width ve max-height tanımlamalarıda yapılır.
max-width, max-height
Yapısı : max-width, max-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | none | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok
max-width, max-height kapsayıcı kutunun maksimum alacağı değerleri belirtmek için kullanırız.
p.menu {
float:left;
width:200px;
max-width:400px;
}
Internet Explorer 7+
Netscape 6+
Opera 5+
W3C’s CSS Level 2+
CSS Profile 2.0
şöyle bir sonumuz vardır ki oda IE’nin 7 versiyonundan sonra bu özellikleri desteklemeye başlamasdır. Bu çok kullanışlı özellikleri bu nedenden dolayı kullanmamazlık yapmayacağız tabi.
IE için bir çözüm vardır. expression() özelliği bu özellik sadece IE tarafından yorumlanır. Bu özellik dinamik özellik olarak tanımlanır. Yani bu kod normalde bir javascript kodudur.
#icerik
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
<body>
<div id="icerik">
....
</div>
</body>
Yukarıdaki tanımlamda css içerisinde javascript komutları kullanılmıştır. Bu tanımlamaları sadece IE anlayacaktır ve uygulayacaktır. Kodda eğer genişlik belirtilen maksimum değerden büyükse atanan değeri alacak değilse auto değeri alacaktır.
Ayrıca min-height için daha kısa bir çözüm vardır
#menu {
min-height:500px;
height:auto !important;
height:500px;
}
Aklıma gelen ilk çözümü söylüyorum belki başka bir çözüm vardır.
div’e vereceğin padding i içine koyacağın nesnelere ver örneğin
yazi
div.icerik p{padding:10px}padding değeri kullanmak zorundayım ama
eğer margin ve padding değerlerini sıfırlarsan bu olacaktır
şöyle birşey yapabiliriyiz peki;
bir div’imiz var eğer içine içerik gelirse bu div gözüksün gelmez ise gözükmesin?
Yani birşey geliyorsa gözükecek gelmiyorsa gözükmeyecek
Eğer katmana bir yükseklik veriyorsan firefox o yüksekliği kale alacaktır ie almayacaktır diye bir bilgi vereceğim ama daha ayrıntılı bilgi verebilmem için kod veya örneğin olduğu sayfa linki lazım.
selam arkadaşlar, yaptığınız ve yorumlarınız çok güzel ama benim bir sorunum var. tüm divleri içine alan bir container divim var ve bu dive hayliyle bir değer veremiyorum. sonuç olarak site içerisine data eklendikçe bu container divi de uzayacak. min-height: 500px verdim ve IE da bu olay başarılı bir biçimde çalışıyor ama Mozilla da maalesef çalışmıyor. değer veriyorum ama verdiğim değeri datalar geçtiğinde container divimin dışına taşıyor. bununla ilgili bir fikriniz var mı?
şimdiden çok teşekkür ederim
Evet aynı sorunla bende karşılaştım. link
sayfada bir çözüm sunulmuş ancak beni tam olara ktatmin etmedi.
Ayrıca Min-Height için kısa bir çözüm var. Max-height için aynı şeyi söylemeyeceğim.
#menu {
min-height:500px;
height:auto !important;
height:500px;
}
fatih bey, öncelikle teşekkürler ancak bu özelliği ie6′ta yükseklik için kullanmaya kalktığımda ie çöküyor :( yükseklik için width değerlerini height yapıyoruz?
sadece genişlik yüksekliktemi kullanabiliyoruz.baya işime yaradı sağol.
teşekkürler…Çok güzel.