Как в HTML+CSS сделать так, чтобы родительский блок охватил по размерам дочерний блок при условии, что он position:absolute?

Question

[eldar_web]

К примеру есть:

<div class='main'>
   <div class='child'></div>
</div>

.child в абсолютной позиции имеют размеры.
Я хочу, чтобы родительский блок тоже имел такие же размеры, как и .child.
Как же сделать так? Не надо .main вручную указывать размеры, так как .child может иметь любые размеры.
Вот пример: https://jsfiddle.net/r1u33Lp9/
Если это получится, то блок должен стать зеленым.

Answer 1

[Николай]

Предположительно никак.
Какой-то реальный пример, зачем это вообще надо можете привести?

Answer 2

[Иван Соломенников]

Даете родительскому блоку размеры, дочернему в размеры указываете inherit.

Если именно нужно чтобы от дочернего отталкивался в размерах родитель, то через js.

Comments

[Lynn «Кофеман»]

У размеров не бывает inherit

[Николай]

Алексей Тен: наверное имелось ввиду что-то типа 100%.

[Иван Соломенников]

Алексей Тен: Бывает. Сейчас даже ради интереса протестировал. codepen.io/anon/pen/PGbLVq

[Lynn «Кофеман»]

Иван Соломенников: Мда, круто. Чего только не узнаешь. И ведь аж с CSS2 существует…
https://www.w3.org/TR/CSS2/visudet.html#propdef-width

Меня ввёл в заблуждение MDN https://developer.mozilla.org/en-US/docs/Web/CSS/w...

Answer 3

[iBird Rose]

ответ: не использовать абсолютное позиционирование для .child
потому что толку от абсолюта, если вы хотите, чтобы он вел себя как дефолтный див.

Answer 4

[spafix]

# При помощи Jquery http://jquery.com
# Работает адаптивно
function mainAutoSize(){
    childH = $('.child').height();
    childW = $('.child').width();
    $('.main').height(childH);
    $('.main').height(childW);
}

$(window).resize(function(){
    mainAutoSize();
});

# Обратите внимание на функции .height() .innerHeight() .outerHeight()
jquery.page2page.ru/index.php5/%D0%A0%D0%B0%D0%B1%...

# Обратите внимание на функции .width() .innerWidth() .outerWidth()
jquery.page2page.ru/index.php5/%D0%A0%D0%B0%D0%B1%...