Merhaba arkadaşlar, bu dersimizde Css ile DOM nesnelerine otomatik boyut verme işlemine bakacağız.Nerelerde kullanılacak dersek şöle anlatayım.Mesela bir div nesnesi var ve bu nesnenin normalde yükseklik değeri 100px olsun.Ama içeriğinde ki yazının boyutunun veya harf sayısının veya diğer DOM nesnelerinin sürekli olarak değişebileceğini düşünün.Bu defa el ile sürekli boyutunu ayarlama çalışmazsınız herhalde .İşte bu sırada bu div nesnesinin CSS kodlarını şu şekilde yazmak mantıklı olacaktır.

Yukarıda ki div içinde ki yazı uzunluğu istediği kadar artabilir.Artık aşağıda ki kodları eklersek bir problem kalmayacaktır.Normalde div tagları içine herhangibir metin yazmaya karşıyım p tagları arasına metin yazılmalıydı ama örnek olması açısından yazmış oldum.Sadece metin olarak düşünmeyin jQuery ile div içine otomatik olarak ul li tagları bastığınızı da varsayalım ve bu ul ve li taglarının dinamik olduğunu yani sayolarının da değişken olabileceğini varsayarak aşağıda ki kod bloğunu kullanarak bu işin içinden rahatlıkla çıkabilirsiniz.Şimdilik kolay gelsin işte kodlar:

Yazar Hakkında

2 Comments

  1. Burada otomatik uzamayı görmek için min-height vermeye gerek yok sadece overflow:hidden; uzatır. Bir alterlatif ise clear:both; ile temizlemek. Yani .icerik div’i kapanmadan önce dediğimizde de otomatik uzar.

  2. Sadece “min-height” verdikten sonra “overflow:hidden” gereksizdir. Ancak bir “max-height” da varsa overflow:hidden bir anlam ifade eder.
    .icerik
    {
    min-height:100px;
    max-height:150px;
    overflow:hidden;
    }
    Tabi width değerimiz olmadığından overflow yatayda bir işie yaramayabilir..

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Close