jquery calculate the height/width of a given dynamicly filled container

I have a div with a UL in it, inside of that UL via the use of jQuery I have LI elements populate it dynamically. So I can have anywhere from 1 li, to a 30 or more. If the amount of elements within th开发者_StackOverflow中文版e UL surpass a certain height/width when dynamically filled in I want to flip the container they reside in from a container that will stretch as it fills to one that scrolls. How would I do that?

When populating the list with new items, you could explicitly check the size:

var maxHeight = 500;
var ul = $("#myUl");
if (ul.height() > maxHeight) {
    ul.css("height",maxHeight+"px").css("overflow-y","scroll");
} else {
    ul.css("height","auto").css("overflow-y","visible");
}

and you can check similarly for width.

How about just applying max-height, max-width, and overflow CSS style rules to your ul element?

.myUL {
    max-height: 500px;
    max-width: 325px;
    overflow: auto;
}

EDIT: This solution will not work for browsers that don't respect the max-height and max-width CSS2 rules (such as IE6).