cómo configurar la altura de los padres del elemento absolutamente posicionado para crecer/reducir encinta

Question

así que tengo esto:

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

estilo como este:

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

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

cómo puedo establecer #parent para crecer y reducir de altura con #child.

Sé que al colocar al niño completamente posicionado, se saca del flujo normal para que el elemento principal pierda la capacidad de ver la altura del niño, pero ¿hay alguna manera de borrarlo tal como lo haría con un flotador?

Answer 1

En CSS, el control siempre fluye de arriba hacia abajo, por lo que la altura del niño puede ser controlada por el padre pero no al revés. Se podría utilizar el siguiente jQuery para lograr lo que busca sin embargo:

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

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

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