Increasing height when appending HTML

Question

I am working with phonegap (build) and I am having problems when adding a variable number of divs inside a div container, as I would expect the container to increase its height accordingly, but it does not.

I have tried the trick with no success. I have also tried different overflows and height:auto combinations with no success either.

I am now working in increasing the container height dynamically but, honestly I am pretty sure there must be a more elegant way to do so (I mean, this container might be inside some other container div, and so on and I can't imagine I must add this code for each one of them every time I need this behavior).

How do you guys deal with this (I guess really common) situation?

Edit:

I have found a solution based on Daniel's answer. Here is how I have dealt with it:

I work with three container divs and a list of a variable number of child divs:

• "page" div. Containing:
  • "content" div. Containing:
    • "categories" div. Containing:
      • A variable number of child divs

(I am sorry it is driving me crazy to add the code properly so I will include it as an image)

The explanation is:

• I define some variables to keep the original height of the three container divs, so later I can add them the necessary additional height depending on how many child divs are included.

• I check whether their values are empty so I assign them the value only the first time, so I don't keep adding height every time the user gets into the page.

• Each child div is 40px tall so I add this to a variable that accumulates the total height increase.

Finally I update the height of the containers and I get to see the whole content.

Anyway, my doubt is: Is it really necessary to do it every time I have to work with a dynamic height?
It is difficult for me to think there is no other way to get the containers increase their height accordingly a dynamic content.

Could anybody help me to understand this?

Answer 1

As you describe you are adding div tags to another div tag like this:

<div id="container">
     <div></div>
     <div></div>
     <div></div>
     test
</div>

The extra div tags doesn't add additional height to the #container.

If this is what you are doing, you wont get extra height.

If you want to load more height inside the #container you can that with many different approaches.

1. With jQuery

   $("#container").css("height", "100px");
   

2. With CSS

   #container {
      height: 100px;
   }
   

If you want to add more height to a div#container you can do the following.

$("#container").click(function() {
    var height = $("#container").height();
    height = height + 10;
    $("#container").css({"height": height+"px"});
    /* do more here if you want :) */
});


<div id="container" style="background-color: red;">
   test
</div>