Resize parent div to match absolutly positioned ch

2019-01-27 05:56发布

问题:

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?

回答1:

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/



回答2:

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.



回答3:

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.