overflow-ozelligi
Bir div'e scrollbar yapısı eklemek için bu özellikten yararlanılabilir. Bu Iframe benzeri bir yapı olarak da düşünelebilir.Div içerisine içerik ekleniyor. İçeriğin taşması ve div sınırları dışına çıkması durumunda nasıl bir görünüm alacağı belirlenebiliyor.
Aldığı değerler
İçeriğin taşması durumunda...
1-) visible : Sınırların dışına çıkabilir.
2-) hidden : Sınırların dışına çıkmaz. Sınır boyunca içeriği ekler sınırı aşan kısımları göstermez.
3-) scroll : Kaydırma çubukları taşma olsada olmasada görünür.
4-) auto : Sınır dışına taşma varsa yatay ve dikey kaydırma çubukları otomatik çıkacak fakat taşma yoksa çıkmayacaktır.
Herhangi bir değer verilmezse varsayılan olarak visible olarak gelmektedir.
Örnek Div ve kaydırma çubuğu.
<div style="overflow:auto; border: 1px solid #666; height: 200px; width: 200px; padding: 6px;">
<p><span >Kırmızı yazı </span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.<span style="font-weight: bold; ">Kalın yazı </span>
</p>
<p>This scrolling are can contain normal html like <a href="#">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Resimde ekleyebilirsiniz</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p class="style1"><span style="font-weight: bold;">burada başka yazı </span></p>
</div>
Çıktısı
Kırmızı yazı Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
This is a normal paragraph.Kalın yazı
This scrolling are can contain normal html like link
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
Resimde ekleyebilirsiniz
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
burada başka yazı