Yükleniyor...

CSS Overflow

Bir kutuya sabit boyut verebilirsiniz. İçerik o kutudan daha yüksek veya daha genişse ne olur? overflow fazlalığın dışarı taşacağına, kesileceğine yoksa kaydırılabilir olacağına karar verir.

Bir bakışta anahtar sözcükler

📊 Yaygın overflow değerleri

Değer Günlük anlam
visible (varsayılan) Fazla içerik kutunun dışına taşabilir
hidden Fazla kesilir; kaydırma çubuğu yok
scroll Kaydırma çubukları gösterilir (çoğu zaman gerekmese de)
auto Çubuklar yalnızca içerik taşınca görünür

Varsayılan: içerik taşabilir

overflow: visible (varsayılan) ile uzun içerik kutu kenarlarının dışında çizilebilir.

Görünür overflow (varsayılan)

css
CSS Code 
.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

hidden ile kesin

overflow: hidden sığmayanı keser. Temiz kenarlar için yararlı — ama kullanıcı kalanı kaydıramaz.

Hidden taşmayı keser

css
CSS Code 
.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

scroll ile her zaman çubuklar

overflow: scroll kutuyu kaydırılabilir yapar ve içerik sığsa bile çoğu zaman çubuk yeri ayırır.

Her zaman scroll

css
CSS Code 
.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}

Auto — yalnız gerektiğinde kaydır

overflow: auto paneller için sakin bir günlük seçimdir: taşmada çubuklar gelir, gerekmeyince çoğu zaman yolun dışında kalır.

Gerektiğinde auto

css
CSS Code 
.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}

Bir ekseni kontrol edin

Yatay ve dikey davranış farklı olmalıysa overflow-x ve overflow-y kullanın — örneğin dikey kaydır, yatay taşmayı kes.

Dikey kaydır, yatay kes

css
CSS Code 
.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}

Pratik panel alışkanlığı

Kutuya gerçek bir yükseklik (veya max-height) verin, sonra okunabilir kaydırılabilir alanlar için auto seçin.

Kaydırılabilir not paneli

css
CSS Code 
.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}

Kendiniz deneyin

  1. width ve kısa height ile bir kutu yapın, birkaç paragraf yapıştırın.
  2. overflow değerini visible, hidden, scroll ve auto arasında değiştirin.
  3. Geniş bir metin satırında overflow-x: hidden ve overflow-y: auto koyun.
  4. max-height ile .note-panel kurun; çubukların yalnız gerektiğinde geldiğini görün.
  5. Yükseklik (veya max-height) sınırı olmadan overflow’un çoğu zaman kısıtlayacak bir şeyi olmaz.

Sık hatalar

  • Sınırlı yükseklik/genişlik olmadan overflow etkisi beklemek
  • auto daha sakinken her yerde scroll kullanmak
  • Overflow’u (kutu taşması) text-overflow ile karıştırmak (metinde üç nokta — sonraki araç)
  • hidden ile kesip kullanıcının kalanı gerekebileceğini unutmak
  • Overflow’un box-sizing hesabını değiştirdiğini sanmak (değiştirmez)

Özet

  • Overflow, içerik kutusundan büyükken taşma, kesme ve kaydırmayı kontrol eder
  • Varsayılan visible; hidden keser; scroll çubuk verir; auto gerektiğinde
  • Etkiyi görmek için çoğu zaman sınırlı boyut (height / max-height / width) gerekir
  • overflow-x ve overflow-y eksenleri ayırır
  • Birçok panel için overflow: auto sakin bir alışkanlıktır

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders