Search code examples
javascriptjqueryhtmlcss

Scrollbar on a div should appear only if it has more than 30 items

I have a container div which contains other divs(list items). The size of this container div should equal heights of 30 items. If there are more than 30 items in container div, it should stay the same size, but show vertical scrollbar.

Question:

Is there a way to style this container div by CSS so that only after more than 30 list items will be added, the scroll would appear? Or I have to "hardcode" the height of the container div in CSS which would be list_item*30. Or other possibility: use JavaScript to dynamically change height of container on initialization depending on list item height. Are these are the only correct ways to do this?

Thank you.

Solution

  • Mention CSS height to parent div and overflow-y to scroll.

    here i take two divs height for parent div.

    Example Here

    enter code here

    http://jsfiddle.net/2C7qH/