How do I make the scrollbar on a div only visible when necessary?

css html scrollbar
Benubird picture Benubird · Feb 6, 2013 · Viewed 250.5k times · Source

I have this div:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

The scrollbars are always visible, even though the text does not overflow. I want to make the scrollbars only be visible when necessary - that is, only visible when there is enough text in the box that they are needed. Like a textarea does. How do I do this? Or is my only option to style a textarea so it looks like a div?

Answer

Hidde picture Hidde · Feb 6, 2013

Use overflow: auto. Scrollbars will only appear when needed.

(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto).

Related questions

CSS customized scroll bar in div

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

Read More
Hide html horizontal but not vertical scrollbar

I have an HTML textarea that is of fixed width, but variable height. I would like to set overflow:scroll and be able to show a vertical scrollbar, but not a horizontal one. I am not able to use overflow:…

Read More
How can I add a vertical scrollbar to my div automatically?

I want to add a vertical scrollbar to my <div>. I've tried overflow: auto, but it is not working. I've tested my code in Firefox and Chrome. I'm pasting the div style code here: float: left; width: 1000px; …

Read More