CSS overflow Özelliği

CSS overflow

Boyutları belirlenen bir html elemanın içeriği kutu boyutunu aştığı durumlarda css overflow özelliği ile gösterimler kontrol edilebilir.Kaydırma çubuklarının çıkıp çıkmayacağını veya çıkacaksada x yönünde mi y yönünde mi kaydırma çubuğu istiyoruz gibi sorularımızı cevaplayan ve çözen bir özelliktir.

Örnek:

Bu css örneğinde iki tane div elemanından bir tanesine scroll diğerine ise hidden değeri verilmiştir.

div.scroll { background-color: yellow; width: 150px; height: 150px; overflow: scroll; } div.hidden { background-color: pink; width: 150px; height: 150px; overflow: hidden; }

CSS overflow nedir nasıl kullanılır

Overflow özelliği ile birlikte içeriğin elementin boyutlarını aşması durumunda kaydırma çubuğunun gösterilip gösterilmeyeceğini kontrol edebiliriz.

CSS overflow CSS overflow özellikleri  
Varsayılan Değer: visible  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS2  
JavaScript overflow: object.style.overflow="scroll"

CSS overflow Tarayıcı Desteği

Tablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını göstermektedir.

CSS Kodu:
overflow 1.0 4.0 1.0 1.0 7.0

CSS overflow Değerleri

overflow:visible|hidden|scroll|auto|initial|inherit;

CSS overflow özelliği değerleri

CSS overflow değerleri CSS overflow değerleri tanımları CSS örnek uygulamalar
visible Taşan içerik görünür.
hidden Taşan içerik gizlenir.
scroll İçerik taştığı zaman kaydırma çubukları görünür.
auto Taşma kesilmiş ise, bir kaydırma çubuğu içeriğin geri kalanını görmek için ilave edilir.
initial Özelliğin varsayılan değeridir.
inherit Kalıtsal olarak aldığı değeri kullanır.  

Yorumlar

Popüler yayınlar

CSS justify-content Özelliği

HTML Yorumlar

CSS align-items özelliği

CSS content Özelliği

CSS border-bottom Özelliği

CSS text-align Özelliği

CSS top Özelliği

CSS flex-basis Özelliği

CSS background-repeat Özelliği

Javascript ile neler yapılabilir