[css] Dynamic height for DIV

I have the following DIV

<div id="products">

</div>

#products
{
    height: 102px; width: 84%;
    padding:5px; margin-bottom:8px;
    border: 1px solid #EFEFEF;
}

Now inside the DIV, I am dynamically generating 4 links. But sometimes there could be more or less than 4 links. How can I change the CSS to dynamically resize the DIV according to its contents?

You should be okay to just take the height property out of the CSS.

This worked for me as-
HTML-

    <div style="background-color: #535; width: 100%; height: 80px;">
        <div class="center">
            Test <br>
            kumar adnioas<br>
            sanjay<br>
            1990
        </div>
    </div> 

CSS-

.center {
    position: relative;
    left: 50%;
    top: 50%;
    height: 82%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
   }  

Hope will help you too.

calculate the height of each link no do this

document.getElementById("products").style.height= height_of_each_link* no_of_link

Set both to auto:

height: auto;
width: auto;

Making it:

#products
{
    height: auto;
    width: auto;
    padding:5px; margin-bottom:8px;
    border: 1px solid #EFEFEF;
}

as prior ans remove the height attrib. if u want your expansion along with its min height then use min-height: 102px instead of height: 102px.

note ie 6 and min-height http://www.dustindiaz.com/min-height-fast-hack/