How do you add a scroll bar to a div?

Css Problem Overview

I have a popup that displays some results, and I want a scroll bar to be display since the results are being cutt off (and I don't want the popup to be too long).

Css Solutions

Solution 1 - Css

You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical).

If you only want a scrollbar when needed, just do overflow-y:auto;

Solution 2 - Css

Css class to have a nice Div with scroll

.DivToScroll{   
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
}

.DivWithScroll{
    height:120px;
    overflow:scroll;
    overflow-x:hidden;
}

Solution 3 - Css

If you want to add a scroll bar using jquery the following will work. If your div had a id of 'mydiv' you could us the following jquery id selector with css property:

jQuery('#mydiv').css("overflow-y", "scroll");

Solution 4 - Css

to add scroll u need to define max-height of your div and then add overflow-y

so do something like this

.my_scroll_div{
    overflow-y: auto;
    max-height: 100px;
}

Solution 5 - Css

<div class="scrollingDiv">foo</div> 

div.scrollingDiv
{
   overflow:scroll;
}

Solution 6 - Css

<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:40%;
height:200PX;
FLOAT: left;
margin-left: 5%;
padding: 1%;
overflow:scroll;
}


</style>
</head>

<body>



<div class="scroll">You can use the overflow property when you want to have better       control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better </div>


</body>
</html>

Solution 7 - Css

If you have a CSS file, you can define a call for the <div> element and assign the overflow: auto CSS property.

In the HTML file: <div class="container">

In the CSS file you put:

.container{
    overflow: "auto";
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Blankman	View Question on Stackoverflow
Solution 1 - Css	Mitch Dempsey	View Answer on Stackoverflow
Solution 2 - Css	Ricardo Lima	View Answer on Stackoverflow
Solution 3 - Css	ScottyG	View Answer on Stackoverflow
Solution 4 - Css	user889030	View Answer on Stackoverflow
Solution 5 - Css	Gabe	View Answer on Stackoverflow
Solution 6 - Css	Daveontrak	View Answer on Stackoverflow
Solution 7 - Css	Braulio Livio	View Answer on Stackoverflow