Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div vertical scrollbar show

Tags:

html

css

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.

like image 512
Alec Smart Avatar asked May 08 '09 06:05

Alec Smart


People also ask

How do I make my vertical scrollbar always visible?

To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.

How do I add a vertical and horizontal scrollbar to a div?

For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.

How do you make a div scrollable?

It can be easily done by using the overflow property. The overflow property has different values. E.g., overflow: auto; and an axis hiding procedure like overflow-x: hidden; and overflow-y: auto; will make a bar scrollable vertically and horizontally, and the "auto" value will add only a vertically scrollable bar.


1 Answers

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>
like image 152
Eoin Campbell Avatar answered Sep 26 '22 03:09

Eoin Campbell