как установить высоту родительского элемента абсолютно позиционированного элемента для увеличения / уменьшения с дочерним

#html #css

#HTML #css

Вопрос:

итак, у меня есть это:

 <div id="parent">
    <div id="child"></div>
</div>

оформленный следующим образом:

 #parent {
    width: 100%;
    padding: 10px;
}

#child {
    position: absolute;
    width: auto;
    left: 0px;
    right: 0px;
}

как я могу настроить #parent для увеличения и уменьшения высоты с помощью #child .

Я знаю, что установка дочернего элемента в абсолютное положение выводит его из обычного потока, поэтому родительский элемент теряет способность видеть высоту дочернего элемента, но есть ли какой-либо способ, которым я могу очистить его, возможно, как вы сделали бы с помощью float?

Ответ №1:

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

 var resizeParent = function() {
  var child_height = $('#child').height();
  $('#parent').height(child_height);
};

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

$document.ready(function() {
  resizeParent();
});