I am wondering how its possible to permanently show the vertical bar of a div (greyed out if there is no scrolling) similar to our regular bars. Basically I am trying to place an entire website in a div (like gmail/facebook), so if the page is not long enough the whole page shifts because of the lack of the vertical scroll bar.
I need a solution to this problem. I tried overflow-y:scroll. But it doesn't seem to work at all.
What browser are you testing in?
What DOCType have you set?
How exactly are you declaring your CSS?
Are you sure you haven't missed a ; before/after the overflow-y: scroll?
I've just tested the following in IE7 and Firefox and it works fine
<!-- 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>Have you tried overflow-y:auto ? It is not exactly what you want, as the scrollbar will appear only when needed.
In reactjs...
<div className='p-4 mb-4' style={{overflowY:'scroll',height:'350px'}}>
{msgx.map((m,index)=>{
return(
<Items m={m} key={index} i={index}/>
)
})}
</div>