Pazartesi , 11 Aralık 2017
Anasayfa » WEB » CSS » CSS Overflow Kullanımı

CSS Overflow Kullanımı

Bir öğenin içeriği, onu kapsayan gösteriminde bulunacak öğenin boyutu için fazla ise, bu durumda içerikte bir taşma meydana gelecektir. Bu gibi durumlarda içeriğinizi sayfanızda kontrol edebilmeniz için CSS size iki farklı yöntem sunmaktadır.

overflow

CSS overflow özelliği bir öğenin içeriği belirtilen alandaki sığmayacak kadar büyük olduğu zaman kaydırma çubukları eklemenizi sağlar. overflow özelliği yalnızca belirli bir yüksekliğe sahip blok elemanları için çalışır  ve alabileceği dört farklı değer vardır;

  • visible
  • hidden
  • scroll
  • auto

Not: Apple’ın Mac OS X işletim sisteminde, kaydırma çubukları varsayılan olarak gizlidir ve yalnızca taşma durumunda kaydırma çubuklarını ekleseniz bile, kullanılırken gösterilir.

overflow : visible ;

overflow Özelliğine visible değerinin atanması varsayılanın içeriğin öğe kutusunun dışına taşmasına izin verildiğini ifade eder.

Örnek;

Aşağıdaki örnekte bir içerik taşması durumunu görebilirsiniz.

overflow : hidden;

hidden Değeri taşma durumunda kırpılmaya izin verir. Sığmayan içerik kısmı görüntülenmez.

Örnek;

overflow : scroll;

scroll Değeri verildiğinde içerikte taşan kısım kırpılır ve kutunun içinde ilerlemek için bir kaydırma çubuğu eklenir. Bunun, yatay ve dikey olarak bir kaydırma çubuğu ekleyeceğini unutmayın (buna ihtiyacınız olmasa bile)

Örnek;

overflow : auto;

auto Değeri sadece içeriğin taşması halinde kaydırma çubukları ekler.

Örnek;

Aşağıdaki örneği <div> öğesinin farklı yükseklikleri için test ediniz. Böylece kaydırma çubuklarının otomatik olarak oluşturulduğunu fark edeceksiniz..

overflow-x ve overflow-y Özellikleri

overflow-x ve overflow-y Özellikleri taşma durum kontrolünü yatay veya dikey olarak (veya her ikisinde de) değiştirip değiştirmeyeceğini belirtmenizi sağlar.

  • overflow-x : içeriğin sol ve sağ kenarlarıyla olan taşma kontrolünü sağlar.
  • overflow-y : içeriğin üst ve alt kenarlarıyla olan taşma kontrolünü sağlar.

Örnek;

 

 

 

Hakkında Recep ORTAKÖYLÜ

İlginizi Çekebilir

CSS Grid: Web Sayfası Şabolunu Oluşturma

CSS Grid Layout, CSS içinde bulunan en güçlü yerleşim düzenidir.  Tek boyutlu flexbox’ın aksine hem …

2 Yorumlar

  1. Harika dersler. Hazırlayanların elleri dert görmesin.

Bir Cevap Yazın

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