Увеличение высоты при добавлении HTML

Я работаю с phonegap (build), и у меня возникают проблемы при добавлении переменного числа divs внутри контейнера div, так как я ожидал бы, что контейнер соответственно увеличит свою высоту, но это не так.

Я попробовал трюк без успеха. Я также пробовал разные переполнения и высоту: автоматические комбинации без успеха.

теперь я работаю над динамическим увеличением высоты контейнера, но, честно говоря, я уверен, что должен быть более элегантный способ сделать это (я имею в виду, что этот контейнер может быть внутри другого контейнера div, и так далее, и я не могу представить, что должен добавлять этот код для каждого из них каждый раз, когда мне нужно это поведение).

Как вы, ребята, справляетесь с этой (я думаю, действительно распространенной) ситуацией?

Edit:

Я нашел решение, основанное на ответе Даниэля. Вот как я с этим справился:--1-->

Я работаю с тремя контейнерами divs и списком переменных количество детей divs:

  • " страница " div. Содержащий:
    • " содержание " div. Содержащий:
      • " категории " div. Содержащий:
        • переменное число дочерних divs

(Мне жаль, что это сводит меня с ума, чтобы добавить код правильно, поэтому я включу его в качестве изображения)

объяснение есть:

  • Я определяю некоторые переменные, чтобы сохранить исходную высоту трех контейнеров divs, поэтому позже я могу добавить им необходимую дополнительную высоту в зависимости от того, сколько дочерних divs включены.

  • Я проверяю, пусты ли их значения, поэтому я назначаю им значение только в первый раз, поэтому я не продолжаю добавлять высоту каждый раз, когда пользователь попадает на страницу.

  • каждый ребенок div 40px высокий, поэтому я добавляю это к переменная, которая аккумулирует общее увеличение высоты.

наконец, я обновляю высоту контейнеров, и я вижу весь контент.

во всяком случае, я сомневаюсь: действительно ли нужно делать это каждый раз, когда мне приходится работать с динамической высотой?
Мне трудно думать, что нет другого способа заставить контейнеры увеличить свою высоту соответственно динамическому содержанию.

может ли кто-нибудь помочь мне понять это?

8
cordova css jquery

1 ответов

как вы описываете, вы добавляете теги div к другому тегу div, как это:

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

дополнительные теги div не добавляют дополнительную высоту к контейнеру#.

если это то, что вы делаете, вы не получите дополнительную высоту.

если вы хотите загрузить больше высоты внутри контейнера#, вы можете это сделать с помощью разных подходов.

  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>
1