附加HTML时增加高度

Question

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

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

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

你们如何应对这种情况(我猜这真的很常见)？

编辑:

我找到了一个基于Daniel的答案的解决方案.这是我如何处理它:

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

• "page"div.含:
  • "内容"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 添加更多高度，可以执行以下操作。

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