附加HTML时增加高度

Question

我正在使用phonegap（build），在div容器中添加可变数量的div时遇到问题，因为我希望容器相应地增加其高度，但事实并非如此。

我尝试过这个伎俩并没有成功。我也尝试了不同的溢出和高度：自动组合也没有成功。

我现在正致力于动态增加容器高度，但老实说，我很确定必须有更优雅的方法（我的意思是，这个容器可能在其他容器div中，等等我可以我想我每次需要这种行为时都必须为每一个代码添加这个代码。）

你们如何应对这种情况（我觉得很常见）呢？

修改

我找到了一个基于丹尼尔回答的解决方案。以下是我处理它的方式：

我使用三个容器div和一个可变数量的子div列表：

• “page”div。含：
  • “content”div。含：
    • “类别”div。含：
      • 可变数量的子div

（很抱歉，正确添加代码让我疯狂，所以我会将其作为图片包含在内）

解释是：

• 我定义了一些变量以保持三个容器div的原始高度，所以稍后我可以根据包含的子div数添加必要的额外高度。

• 我检查它们的值是否为空，所以我只在第一次给它们分配值，所以每次用户进入页面时我都不会继续增加高度。

• 每个儿童div都是40px高，所以我把它添加到一个累积总高度增加的变量。

最后，我更新容器的高度，然后看到整个内容。

无论如何，我的疑问是：每次我必须使用动态高度时，是否真的有必要这样做？ 我很难想到没有其他方法可以让容器相应地增加其高度作为动态内容。

有人能帮助我理解这个吗？

Answer 1

如您所述，您正在将div标签添加到另一个div标签中，如下所示：

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

额外的div标签不会为#container增加额外的高度。

如果这是你正在做的事情，你将无法获得额外的高度。

如果你想在#container中加载更多的高度，你可以使用许多不同的方法。

1. 使用jQuery

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

2. 使用CSS

   #container {
      height: 100px;
   }
   

如果要为div＃容器添加更多高度，可以执行以下操作。

$("#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>