jquery - 附加 HTML 时增加高度

Question

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

我试过这个技巧，但没有成功。我也尝试了不同的溢出和高度:自动组合也没有成功。

我现在正在努力动态地增加容器高度，但是，老实说，我很确定必须有一种更优雅的方法来做到这一点(我的意思是，这个容器可能在其他容器 div 中，依此类推，我可以想象一下，每次我需要这种行为时，我都必须为它们中的每一个添加这段代码。

你们如何处理这种(我想很常见的)情况？

编辑:

我根据 Daniel 的回答找到了解决方案。以下是我的处理方式:

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

• “页面”分区。包含:
  • “内容”部分。包含:
    • “类别”分区。包含:
      • 可变数量的子div

(很抱歉正确添加代码让我发疯所以我将它作为图像包含在内)

解释是:

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

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

• 每个子 div 的高度为 40 像素，因此我将其添加到一个累积总高度增加量的变量中。

最后我更新了容器的高度，我看到了全部内容。

无论如何，我的疑问是:每次我必须使用动态高度时，真的有必要这样做吗？
我很难认为没有其他方法可以让容器根据动态内容增加高度。

谁能帮助我理解这一点？

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 添加更多高度，您可以执行以下操作。

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