8

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

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

我现在正在动态增加容器高度，但老实说，我很确定必须有一种更优雅的方式来做到这一点（我的意思是，这个容器可能在其他容器 div 内，等等，我无法想象每次需要这种行为时，我都必须为它们中的每一个添加此代码）。

你们如何处理这种（我猜很常见）的情况？

编辑：

我根据丹尼尔的回答找到了解决方案。以下是我的处理方式：

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

  • “页面” div。包含：
    • “内容” div。包含：
      • “类别” div。包含：
        • 可变数量的子 div

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

解释是：

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

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

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

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

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

任何人都可以帮助我理解这一点吗？

4

1 回答 1

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>
于 2012-12-20T01:25:52.670 回答