Div'ime otomatik olarak dikey bir kaydırma çubuğunu nasıl ekleyebilirim?

Dikey bir kaydırma çubuğu eklemek istiyorum <div>. Denedim overflow: autoama çalışmıyor. Kodumu Firefox ve Chrome'da test ettim.

Div stil kodunu buraya yapıştırıyorum:

float: left;
width: 1000px;
overflow: auto;

overflow: auto;Mülkün çalışması için biraz yükseklik atamanız gerekir .
Test amacıyla ekleyin height: 100px;ve kontrol edin.
ve overflow-y:auto;bunun yerine verirseniz daha iyi olur overflow: auto;, çünkü bu, öğenin yatay değil sadece dikey kaydırılmasına neden olur.

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

Konteynerin yüksekliğini bilmiyorsanız ve konteyner sabit bir yüksekliğe ulaştığında dikey kaydırma çubuğunu göstermek istiyorsanız, diyelim ki 100px, özellik max-heightyerine kullanın height.

Daha fazla bilgi için bu MDN makalesini okuyun .

max-heightMülk eklemelisiniz .

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}

<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>

Şunları ayarlayabilirsiniz:

overflow-y: scroll;height: XX px

Benim üzerimde harika bir kaydıraç var div-popup. Uygulamak için bu stili div öğenize ekleyin:

overflow-y: scroll;
height: XXXpx;

heightBelirttiğiniz div yüksekliği olacak ve bu yüksekliğin üstünde içeriği varsa bir kez, bunu kaydırmak zorunda.

Teşekkür ederim.

Div'inizde dikey kaydırma çubuğunu göstermek için eklemeniz gerekir

height: 100px;   
overflow-y : scroll;

veya

height: 100px; 
overflow-y : auto;

Div'i ne için kullanmaya çalıştığınızdan tam olarak emin değilim, ancak bu rastgele bir metin içeren bir örnek.

Mr_Green, overflow-y: autodikey kaydırmayla sınırlandırdığı için eklemeyi söylediğinde doğru talimatları verdi . Bu bir JSFiddle örneğidir:

JSFiddle