Css Overflow Kullanımı

Bu yazımızda Css’te Overflow özelliği nedir? onu öğreneceğiz. Overflow özelliği ile bir etiketin içeriği taşıyor ise bunu gösterebilir, gizleyebilir veya etikete scroll eklenmesini sağlayabiliriz.

Bu özellik dört değer alır;

      ► visible

      ► hidden

      ► scroll

      ► auto

Şimdi bu değerleri örnek bir uygulama üzerinde inceleyelim.

Bir div etiketi oluşturalım. Bunun yükseklik ve genişlik değerine 150px verelim. İçerisine ise sığmayacak kadar bir yazı ekleyelim.

css-dersleri-overflow-kullanimi-1

Gördüğünüz gibi içerisindeki yazı sığmadığı için div etiketinin dışına taşıyor.

Burada aslında overflow değeri visible. Yani default olarak zaten overflow:visible; olarak geliyor. Bu yüzden taşanları gösteriyor.

Eğer taşan kısımların görünmesini istemiyorsak overflow:hidden; özelliğini kullanmalıyız.

css-dersleri-overflow-kullanimi-2

Gördüğünüz gibi artık taşan kısımları göremiyoruz.

Eğer taşan kısımlar görünmesin ama scroll oluşsun ve bu scroll ile taşan kısımları görmek istiyorsak overflow:scroll; özelliğini kullanmalıyız.

css-dersleri-overflow-kullanimi-3

Gördüğünüz gibi scroll değeri verdiğimiz zaman x ve y ekseninde scroll’ lar oluştu.

Ama bize sadece y ekseninde scroll gerekiyordu. Bu gibi durumlarda yani sadece gerekli eksende scroll oluşmasını istiyorsak overflow:auto; özelliğini kullanmalıyız.

css-dersleri-overflow-kullanimi-4

Gördüğünüz gibi sadece y ekseninde scroll oluştu.

Overflow özelliğine verdiğimiz değerler x ve y eksenleri için de uygulanır. Eğer sadece x ekseninde uygulanmasını istiyorsak overflow-x, sadece y ekseninde uygulanmasını istiyorsak overflow-y özelliklerinide kullanabiliriz.

Bunlarında alacağı değerler overflow ile aynıdır. Yani şu dört değeri alabilirler;

      ► visible

      ► hidden

      ► scroll

      ► auto

Örneğin sadece x ekseninde scroll oluşturup, y eksenindekini gizleyelim.

css-dersleri-overflow-kullanimi-5

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply