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.