CSS Dersleri 22 - Overflow Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Overflow Özelliği konusunu öğreneceğiz.

CSS "overflow" özelliği, bir alana sığmayacak kadar büyük içeriğe ne olacağını kontrol eder.Overflow özelliği, bir etiketin içeriği belirtilen alana sığmadığında içeriğin kırpılıp kırpılmayacağını veya kaydırma çubukları eklenip eklenmeyeceğini belirtir.

Overflow özelliği aşağıdaki değerlere sahiptir:

  • visible - Varsayılan değerdir. Taşma kırpılmaz. İçerik, etiketin dışında görüntülenmeye devam eder.
  • hidden - Taşma kırpılır ve içeriğin geri kalanı görünmez olur
  • scroll - Taşma kırpılır ve içeriğin geri kalanını görmek için bir kaydırma çubuğu (scrollbar) eklenir
  • auto - Scroll değerine benzer, ancak yalnızca gerektiğinde kaydırma çubukları ekler.

Not: Overflow özelliği yalnızca belirli bir yüksekliğe sahip blok etiketleri için çalışır.

overflow:visible Kullanımı

CSS'de "overflow:visible" özelliği varsayılan değerdir,ve taşma görünür durumdadır, yani kırpılmaz ve etiketin dışında görüntülenmeye devam eder :

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

overflow : hidden Kullanımı

CSS'de "overflow:hidden" özelliği, etikete ait taşma kırpılır ve içeriğin geri kalanı gizlenir:

div {
  overflow: hidden;
}

overflow : scroll Kullanımı

CSS'de "overflow : scroll" özelliği, etikette taşan kısmı kaydırılacak şekilde görüntülenmesini sağlar, taşma kırpılır ve kutunun içinde kaydırmak için bir kaydırma çubuğu eklenir. Bunun hem yatay hem de dikey olarak bir kaydırma çubuğu ekleyeceğini unutmayın (ihtiyacınız olmasa bile):

div {
  overflow: scroll;
}

overflow : auto Kullanımı

CSS'de "overflow :auto" özelliği, scroll özelliğine benzer, ancak yalnızca gerektiğinde kaydırma çubukları ekler:

div {
  overflow: auto;
}

overflow-x ve overflow-y Kullanımı

CSS'de "overflow-x" ve "overflow-y" özellikleri, içeriğin taşmasının yalnızca yatay olarak mı yoksa dikey olarak mı (veya her ikisi) değiştirilip değiştirilmeyeceğini belirtir:

div {
  overflow-x: hidden; /* Yatay olarak taşmayı gizle */
  overflow-y: scroll; /* Dikey olarak taşmaya kaydırma çubuğu ekle */
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla