Высота div с абсолютно позиционируемыми детьми

Question

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

http://jsbin.com/okamot/1/edit

Все под .drag-drop должен быть абсолютно размещен таким образом, высота и ширина .drag-drop становится равным нулю. Кнопка экспонирования и текст экспоната должны отображаться после выделенного жирным шрифтом This is Drag and Drop Item. Но поскольку высота .drag-drop равна нулю, она отображается прямо над содержимым .drag-drop`.

У меня была эта проблема раньше, но, к счастью, было легко рассчитать высоту детей .drag-drop, а затем я установил бы высоту .drag-drop, чтобы использовать javascript. На этот раз это сложнее, поскольку в нем содержится больше детей, и они не постоянны. Как я могу изменить свой css, чтобы на иллюстрации показывалось падение перетаскивания?

Answer 1

Абсолютное позиционирование удаляет элемент из макета, поэтому дети больше не являются частью вычисления размера родителя. Вам нужно будет использовать JS для решения этой проблемы.

Answer 2

Лучший способ - не сделать контент абсолютным. Не могли бы вы сделать их относительными позициями или поплавать ими? Вы все равно можете управлять своим положением, высотой, шириной и т. Д., И у них будет макет, поэтому содержащий div будет иметь правильную высоту.

Примечание, если вы плаваете их, возможно, потребуется добавить «всплыть выключатель» в нижней части контейнера DIV, чтобы получить его, чтобы вычислить высоту правильно: .... <div>some floated content</div> <br style="float: none;"/> // float-breaker right before containing div closes </div>

В противном случае предыдущий ответивший правильно, вам Мне понадобится хакерство js.