CODEWITHSUNDEEP
css
Refti
Refti

Reputation: 755

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?

Upvotes: 23

Views: 175026

Answers (6)

S.Yadav
S.Yadav

Reputation: 4509

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.

Upvotes: 2

KoolKabin
KoolKabin

Reputation: 17643

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/

Upvotes: 1

Praveen Prasad
Praveen Prasad

Reputation: 32107

calculate the height of each link no do this

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

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382626

Set both to auto:

height: auto;
width: auto;

Making it:

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

Upvotes: 1

Chinmayee G
Chinmayee G

Reputation: 8117

set height: auto; If you want to have minimum height to x then you can write

height:auto;
min-height:30px;
height:auto !important;        /* for IE as it does not support min-height */
height:30px;                   /* for IE as it does not support min-height */

Upvotes: 48

Aaron Hathaway
Aaron Hathaway

Reputation: 4315

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

Upvotes: 1

Related Questions