jquery – 在附加HTML时增加高度

前端之家收集整理的这篇文章主要介绍了jquery – 在附加HTML时增加高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用phonegap(build),我在div容器中添加可变数量的div时遇到问题,因为我希望容器相应地增加其高度,但事实并非如此.

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

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

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

编辑:

我找到了一个基于Daniel的答案的解决方案.以下是我处理它的方式:

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

>“page”div.含:

>“内容”div.含:

>“类别”div.含:

>可变数量的子div

(很抱歉,正确添加代码使我疯狂,因此我将其作为图像包含在内)

解释是:

>我定义了一些变量以保持三个容器div的原始高度,所以稍后我可以添加必要的额外高度,具体取决于包含多少个子div.
>我检查它们的值是否为空,所以我只在第一次为它们分配值,所以每次用户进入页面时我都不会继续添加高度.
>每个子div都是40px高,所以我将它添加到一个累积总高度增加的变量.

最后我更新了容器的高度,我看到了整个内容.

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

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

解决方法

如您所述,您正在将div标签添加到另一个div标签,如下所示:
<div id="container">
     <div></div>
     <div></div>
     <div></div>
     test
</div>

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

如果这是你正在做的,你将不会得到额外的高度.

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

>使用jQuery

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

>使用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>

猜你在找的jQuery相关文章