CODEWITHSUNDEEP
htmlcss
bimbom22
bimbom22

Reputation: 4510

how to set height of parent of absolutely positioned element to grow/shrink with child

so i have this:

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

styled like this:

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

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

how can I set #parent to grow and shrink in height with #child.

I know that setting child to be absolutely positioned pulls it out of the regular flow so the parent element loses the ability to see the child's height, but is there any way I can clear it maybe like you would with a float?

Upvotes: 5

Views: 3085

Answers (1)

Doug English
Doug English

Reputation: 286

In CSS the control always flows from top down, so the child's height can be controlled by the parent but not the other way round. You could use the following jquery to achieve what you're after though:

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

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

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

Upvotes: 5

Related Questions