CODEWITHSUNDEEP
javascriptjqueryhtmlcssheight
Sergiu B
Sergiu B

Reputation: 167

Resize parent div to match absolutly positioned child div height

I have a CSS problem:

I have an absolute positioned div in a container. The container won't resize to the height of the content. Why?

Upvotes: 1

Views: 3931

Answers (3)

Hussein
Hussein

Reputation: 42818

You need to use JavaScript for this. With jQuery you can do

var parentHeight = $('#parent').height(),
    childHeight = $('#child').height();

if (parentHeight <= childHeight) {
    $('#parent').height(childHeight);
}

Check working example at http://jsfiddle.net/mkCU5/2/

Upvotes: 3

Jon
Jon

Reputation: 437386

Because when you give absolute position to something, you take it out of the layout flow. This means that its dimensions are no longer used to calculate its parent's height, among everything else.

If your element has a known fixed height, then you can give an appropriate height to its parent element as well. Otherwise you should look for another way to achieve your goal.

Upvotes: 2

icktoofay
icktoofay

Reputation: 129001

When something is absolutely positioned with CSS, it takes it out of the flow. When it's out of the flow, it won't be accounted for in height calculations.

Upvotes: 0

Related Questions