如何設置絕對定位的元素長大的父母的身高/縮小與孩子

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(); 
});