I have been trying to find a solution for my scrolling issue, but I just can't seem to get it right. I want the content within a div to scroll inside its container without affecting the header. Here's the updated JSFiddle link with the jQuery code: updated JSFiddle.
HTML:
<div id="my_events" class="profilePopup">
<div class="title_background">
<h3>My Events</h3>
</div>
<div id="myEventsDetails_contaner">
<div class="myEventsIcon">
<div class="eventDetails">
<a href="">
<img src=""width="70px">
<h5><span>12-02-2014</span></h5>
<h5>event</h5></a>
</div>
</div>
<div class="myEventsIcon">
<div class="eventDetails">
<a href="">
<img src=""width="70px">
<h5><span>12-02-2014</span></h5>
<h5>event</h5></a>
</div>
</div>
<div class="myEventsIcon">
<div class="eventDetails">
<a href="">
<img src=""width="70px">
<h5><span>12-02-2014</span></h5>
<h5>event</h5></a>
</div>
</div>
<div class="myEventsIcon">
<div class="eventDetails">
<a href="">
<img src=""width="70px">
<h5><span>12-02-2014</span></h5>
<h5>event</h5></a>
</div>
</div>
<div class="myEventsIcon">
<div class="eventDetails">
<a href="">
<img src=""width="70px">
<h5><span>12-02-2014</span></h5>
<h5>event</h5></a>
</div>
</div>
</div>
</div>
CSS:
#myEventsDetails_contaner{
max-height: 100%;
}
.profilePopup{
border: 1px solid black;
background: #f8f8f8;
z-index: 999;
width: 400px;
height: 200px;
overflow:scroll;
}
.title_background{
background: rgba(0,0,0,0.75);
margin-bottom: 15px;
padding:10px;
position: relative;
}
.myEventsIcon{
padding:10px;
display: inline-block;
}
.eventDetails
{
text-align: center;
}
.eventDetails h5 span{
color:#ff1a00;
display: block;
}
.eventDetails a{
width:150px;
}