Div dikey kaydırma çubuğu göster

89

Normal çubuklarımıza benzer şekilde bir div'in dikey çubuğunu (kaydırma yoksa gri renkte) kalıcı olarak göstermenin nasıl mümkün olduğunu merak ediyorum. Temel olarak bir web sitesinin tamamını bir div'e (gmail / facebook gibi) yerleştirmeye çalışıyorum, bu yüzden sayfa yeterince uzun değilse, dikey kaydırma çubuğunun olmaması nedeniyle tüm sayfa kayıyor.

Bu soruna bir çözüme ihtiyacım var. Taşma-y: kaydırmayı denedim. Ama hiç işe yaramıyor gibi görünüyor.

html css

— Alec Smart
kaynak

184

Hangi tarayıcıda test ediyorsunuz?

Hangi DOCType'ı ayarladınız?

CSS'nizi tam olarak nasıl açıklıyorsunuz?

Bir ;öncesini / sonrasını kaçırmadığınızdan emin misiniz overflow-y: scroll?

Aşağıdakileri IE7 ve Firefox'ta test ettim ve iyi çalışıyor

<!-- Scroll bar present but disabled when less content -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test
</div>

<!-- Scroll bar present and enabled when more contents -->        
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
</div>

Snippet'i genişlet

— Eoin Campbell
kaynak

IE7 ve FireFox'ta da test edildi ve sadece <div style = "overflow-y: scrol"> Merhaba </div> çalışıyor.

— Staale

1

bu benim kullandığım stil sayfası: #main_container {width: 100%; background-color: #eeeeee; overflow-y: kaydırma; yükseklik:% 100; konum: mutlak; }

— Alec Smart

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" " w3.org/TR/html4/loose.dtd ">

— Alec Smart

oh şimdi çalışıyor ... teşekkürler .. şans eseri taşma: div içinde otomatik yazan bir stil etiketi yerleştirdim, bu benim harici css'imin üzerine yazmış ...

— Alec Smart,

32

Denedin overflow-y:automi Kaydırma çubuğu yalnızca ihtiyaç duyulduğunda görüneceğinden tam olarak istediğiniz şey bu değil.

— Kgiannakakis
kaynak

31

Her zaman: Her zaman dikey kaydırma çubuğu istiyorsanız,overflow-y: scroll;

jsFiddle:

<div style="overflow-y: scroll;">
......
</div>

Gerektiğinde : Yalnızca gerektiğinde dikey kaydırma çubuğu istiyorsanız, kullanın overflow-y: auto;(Bu durumda bir yükseklik belirtmeniz gerekir)

jsFiddle:

<div style="overflow-y: auto; height:150px; ">
....
</div>

— Razan Paul
kaynak