CSS anlatımlarımıza devam ediyoruz arkadaşlar. Bu dersimizde sizlere CSS'de overflow tekniğinden bahsedeceğim. Öncelikle Overflow tekniğini tanımlamak gerekir ise, şöyle ki; Örnek olarak bir yazıyorsunuz ve yazdığınız yazı çok uzun. Dolayısı ile yazdığınız yazı taşıyor. İşte, tam bu anda yardımınıza Overflow yetişiyor. Çünkü Overflow tekniği ile belirlediğiniz yükseklik doğrultusunda, yazınızın taşmamasını sağlıyorsunuz. Yani çıkan kaydırma çubuğu ile, yazdığınız yazı belirlediğiniz yükseklik doğrultusunda kalıyor ve taşmamış oluyor. Elbette bir çok Overflow tekniği mevcut, dolayısı ile teker teker bu teknikleri ele alalım.

1) Overflow:auto tekniği

Tekniğin amacı; Yazınıza belli bir yükseklik belirlersiniz, yazınız bu yüksekliği geçer ise kaydırma çubuğu çıkar. Ve o yükseklik doğrultuusnda, kaydırma çubuğu vasıtası ile yazı kaydırılır.

Örnek;

Örneğin kodları;

div#ornek1 {
top: 5px;
height: 90px;
position: absolute;
width: 580px;
left: 5px;
overflow: auto;
background: #f5f5f5;
}

2) Overflow:hidden tekniği;

Tekniğin amacı; Bir yükseklik belirlersiniz, belirlediğiniz yüksekliği geçen yazılar görünmez.

Örnek;

Örneğin kodları;

div#ornek2 {
top: 5px;
height: 90px;
position: absolute;
width: 580px;
left: 5px;
overflow: hidden;
background: #f5f5f5;
}

3)Overflow:scroll tekniği;

Tekniğin amacı; Belli bir yükseklik belirlersiniz. O yüksekliği geçen yazılar için hem dikey, hem de yatay kaydırma çubuğu çıkıyor. Overflow:auto'dan tek farkı; yatay çubuk çıkmasıdır.

Örnek;

Örneğin kodları;

div#ornek3 {
top: 5px;
height: 90px;
position: absolute;
width: 580px;
left: 5px;
overflow: scroll;
background: #f5f5f5;
}