如何设置绝对定位的元素长大的父母的身高/缩小与孩子

Question

，所以我有这样的：

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

风格是这样的：

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

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

我怎么可以设置#parent增长，用#child缩小身高。

我知道将孩子设置为绝对位置会将孩子拉出常规流程，因此父元素失去了看孩子身高的能力，但是有什么办法可以清除它吗？也许就像使用浮子一样？

Answer 1

在CSS中，控件总是从上到下流动，所以孩子的身高可以由父母控制，但不能以其他方式控制。你可以使用下面的jquery来实现你想要的东西：

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

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

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