39

I have a container div that holds many child divs. One of the divs in my container houses comments. Instead of setting the whole div to scroll, I want everything to stay in place, leaving only the comments div to scroll. I have tried setting the parent overflow to hidden, and the comment div to scroll, and the scrollbar actually shows on the page but it is disabled. Does anyone know how I can accomplish this?

CSS

#container
{                
   position: absolute; 
   overflow: hidden; 
}

#comments
{
   position: relative;
   overflow: scroll; 
}

HTML

<div id="container">
   <div id="comments">
      this is what I want to scroll
   </div>
</div>

I cannot get rid of the container because it houses many more child elements. I just want everything else to stay static while only the comments can scroll.

Pilgerstorfer Franz
  • 8,303
  • 3
  • 41
  • 54
user981053
  • 619
  • 3
  • 9
  • 14

3 Answers3

30

You need to set a specific height on the "comments" div to make sure it knows exactly when to scroll. If there's not enough content to fill up that container beyond the specified height, the scrollbar might appear with overflow:scroll but it will be disabled. If you want the scrollbar to appear only when it's actually needed, you'll want to use overflow:auto as the CSS rule. By setting the height of the child container and not the parent, the parent can grow as necessary.

In your example, the position:absolute on the parent container is not required to obtain the solution; however, you might be including that for some other reason.

TLS
  • 3,090
  • 2
  • 25
  • 33
  • Thank you for the easy fix. It was the height element causing the problem. – user981053 Dec 15 '11 at 20:27
  • Awesome! Glad to know it was an easy fix. – TLS Dec 15 '11 at 20:27
  • As mentioned by JustAnil's answer, you might also need to include a width either on the "comments" or "container" div. – TLS Dec 15 '11 at 20:35
  • and what if i dont know the height of the comments div? How can i ever set it if i want to support different height screens – StackExploded Sep 03 '21 at 07:44
  • @StackExploded Not sure it really matters how you set the height of the comments div, just that it needs an explicit height to invoke the scrollbars. (You might have material for a new question rather than a comment?) – TLS Sep 15 '21 at 03:36
15

It is disabled because there's no defined height on the element. Overflow auto will populate the scrollbar if you define a height and the content extends past that height.

#comments{
    height:200px;
    width:200px;
    position: relative;
    overflow: auto; 
}
Kai Qing
  • 18,793
  • 5
  • 39
  • 57
  • it should be noted that position: relative is not needed here unless children in the element depend on it in some way. – Kai Qing Dec 15 '11 at 20:22
  • 1
    +1 for `overflow: auto;`, it won't display the ugly grayed out scroll bar. – piebie Dec 15 '11 at 20:24
  • thanks for `position: relative` which was needed for me in order to work –  Nov 07 '18 at 15:54
4

You need to add a width and height:

Check out this JSFiddle: http://jsfiddle.net/FgGmQ/

HTML: 

<div id="container">
<span>This is the container</span>
<div id="comments">
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll, 
</div>
<span>The end of the container</span>

CSS: 

#container{
    overflow: hidden;
}
#container span{
    background-color: yellow;   
}
#comments{
    overflow: auto; 
    height: 80px;
    width:150px;
}

Again, just check out this JSFiddle

Anil
  • 21,730
  • 9
  • 73
  • 100