Position Fixed in CSS within a bounding box?

Question

I have a comment box like so...

<div id="comments">
   ...
</div>

Now, inside this comments div I have another div called box...

<div id="comments">
   <div id="box">
       ...
   </div>
</div>

The box div is position: fixed and it works mostly fine, but...

What I would like is, instead of the box div "floating" above all the content, for it to be only scrollable within the comment div.

Do i need to use JavaScript for this?

Answer 1

You don't need JS for this. Simply add overflow:scroll and set the outer DIV to the fixed size. Then if internal DIV is larger than outer div you will see the scrollbar(s)

You can try it on this page

Answer 2

<style>
    #comments { overflow: auto; height: 200px; }
</style>

<div id="comments">
   <div id="box">
       ...
   </div>
</div>

Give a suitable height for the container div ( comments ) and oveflow auto will make a scroll bar if the content exceeds the height of the container.

Overflow: the 'overflow' property