Julio, miembro de este staff, nos hizo el favor de redactar este artículo porque conoce muy bien dicho tema.
Solución:
No es posible solo con CSS.
Flujo de diseño:
Un elemento con position:absolute está fuera del flujo de diseño del resto de la página. En lo que respecta al padre relativo, el hijo absoluto no ocupa ningún espacio en el diseño.
Esto es muy útil si necesita tener una ventana emergente o un menú de navegación anidado dentro de un contenedor, ya que no afectará el diseño del contenedor. Ese es el tipo de caso de uso que position:absolute es adecuado para.
Altura fija:
Si necesita que el contenido absoluto se comporte como si fuera parte del flujo de diseño, use una altura fija. Dé al padre relativo y al hijo absoluto una altura fija, y evite colocar cualquier elemento hijo de altura variable antes del hijo absoluto. Si el contenido de altura variable lo precede, use un div de marcador de posición relativo con una altura fija en la ubicación donde debe aparecer el hijo absoluto.
Si position:absolute debe usarse y la altura fija no es una opción, use JavaScript.
Tengo una solución para este problema, puede que no se ajuste a su situación, pero considere examinarla.
Primero que nada necesitamos duplicar todo div posicionado absoluto que desea que el padre se extienda a su altura. Entonces tus HTML se verá así.
1
1
Entonces necesitamos agregar el CSS “ghost div” así:
.inner_box.ghost
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
Solo puedo proporcionarle una solución de Javscript para esto usando jQuery lib. avísame si lo usas o no,
$('.outer_box').height($('.inner_box').outerHeight());
Esta línea fijará la altura de la caja_exterior
Puntuaciones y comentarios
Si aceptas, eres capaz de dejar un enunciado acerca de qué te ha gustado de este post.