Сделайте так, чтобы div регулировал свою высоту в соответствии с его абсолютно позиционированными дочерними элементами.

У меня есть элемент div (позиционирование по умолчанию), содержащий h1 и ссылку, оба из которых имеют абсолютное позиционирование. Естественно, высота элементов div уменьшается. Как заставить элемент div регулировать свою высоту в соответствии с двумя его дочерними элементами? Я пробовал стандартные исправления, устанавливая переполнение на авто и устанавливая положение div на относительное (что было предложением из другого сообщения, которое я нашел), но ни один из них не сработал.

Я сделал jsfiddle, который иллюстрирует мою проблему.

HTML-код:

<div>
  <h1>the div doesnt go around this element</h1>
</div>

CSS-код:

div {border: 2px solid;}
h1 {position: absolute;}

html css clearfix
person Lukeception    schedule 14.02.2017    source источник
comment
Можете ли вы показать код?   -  person Mark    schedule 14.02.2017
comment
Похоже, у него есть ответ на javascript здесь   -  person Leon Freire    schedule 14.02.2017
comment
это ожидаемое поведение. Почему вам нужно, чтобы h1 был абсолютно в position:absolute ? :) .... возможно, вам нужен div в абсолютной позиции, а не его потомки   -  person G-Cyrillus    schedule 14.02.2017

Ответы (2)


arrow_upward
0
arrow_downward

Используйте min-width для div в css, чтобы он покрывал высоту, необходимую для дочерних элементов.

person J Shubham    schedule 14.02.2017
comment
Теперь вы просто предполагаете, что эти высоты не являются переменными. - person Mart; 14.02.2017
comment
Они есть. Но в этом случае его можно считать постоянным, так как есть только 2 элемента. - person J Shubham; 14.02.2017

arrow_upward
0
arrow_downward

Я сделал jsfiddle, помогающий вам решить эту проблему с помощью jquery: https://jsfiddle.net/9hubfbxt/

HTML-код:

<div id="parent">
  <div id="child1" class="child">

  </div>
  <div id="child2" class="child">

  </div>
</div>

jquery:

var height = 0;
$("#parent .child").each(function() {
    height = height + $(this).outerHeight(true);
});

$("#parent").height(height);

Теперь высота может быть любой в зависимости от того, что внутри.

РЕДАКТИРОВАТЬ: я отредактировал ваш jsfiddle с помощью обходного пути jquery: https://jsfiddle.net/4yuco4cL/1/

person Mart    schedule 14.02.2017
comment
моя цель состояла бы в том, чтобы решить это, просто используя css, но если я ничего не найду, я, вероятно, воспользуюсь вашим кодом jquery. - person Lukeception; 14.02.2017
comment
получил это, но тогда единственное решение, которое у вас есть, это либо сделать элементы относительными, как вы сказали, что не хотите ..., либо вам нужно знать высоту внутренних элементов и установить эти высоты вместе как высоту родителя . - person Mart; 14.02.2017