¿Cómo cambiar el tamaño de un contenedor div a la altura total de sus hijos?

Question

Tengo un elemento contenedor que necesito cambiar el tamaño a medida que cambia su contenido. Contiene dos divs absolutamente posicionados que pueden cambiar la altura. Si no especifico la altura del contenedor, cualquier cosa después del contenedor desaparecerá debajo de los contenidos.

En el momento que estoy haciendo lo siguiente pero estaría contento de encontrar una alternativa menos laboriosa:

(contenedor tiene position: relative, #main y #sidebar son position: absolute, el contenido de # barra lateral no tienen posicionamiento especificado)

css:

div#mapcontainer { position:relative; width:100%; height: 600px; } 
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; } 
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;} 

html:

<div id="container"> 
    <div id="main">variable height content here</div> 
    <div id="sidebar"> 
     <div id="foo">...</div> 
     <div id="bar">....</div> 
     ... 
    </div> 
<div> 

JS:

fixHeights = function() { 
    var children_height = 0; 
    $('#sidebar'). children().each(function(){children_height += $(this).height();}); 
    $('#container').height(Math.max(children_height, $('#main').height())); 
}; 

Answer 1

Esta es una pregunta muy extraña, como la altura del div es siempre la altura de sus hijos.

¿Está flotando contenido en su contenedor div? Cuando flotas contenido infantil, el div que contiene ya no actúa de la misma manera.

Si estás flotando contenido que se extiende más allá de la parte inferior del contenedor div, agregue la siguiente div a la parte inferior de los hijos del contenedor div:

<div style="clear:both;"></div> 

que no va a permitir que los niños flotan sobre él, lo que obliga a la div que contiene a ser la altura de su hijo más alto ...

<div id="container"> 
    <div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div> 
    <div id="static" style="margin-left:104px;">Lots of static stuff here</div> 
    <div style="clear:both;"></div> 
</div> 

---

está bien, no estoy seguro de por qué está haciendo el posicionamiento de la forma de ser, pero yo he hecho algo similar para un sitio web que tenía que parecerse a una aplicación de escritorio. No creo que haya otra forma de hacer esto que no sea javascript. Los documentos html están diseñados para fluir, no ser rígidos. Si desea fianza en el javascript, tendrá que dejar de lado los estilos de posicionamiento y usar sus divisiones flotantes y de compensación. No es que horribles ...

Answer 2

si estuviera flotando el div contenedor "overflow: auto" también puede funcionar por arte de magia, especialmente en lo que respecta a la debacle IE hasLayout

Answer 3

No ha especificado, pero Creo que tienes un problema con los elementos flotantes y quieres que el contenedor en el que están sea al menos del tamaño del elemento flotante más grande. Usted debe tratar este truco CSS que obliga al navegador para que regenere el tamaño del elemento contenedor para el tamaño de los elementos flotantes:

#wrapper:after { 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
} 

Déjame saber lo que te ocurrió y si esto funciona. Hay muchos otros hacks para probar, dependiendo de su navegador.

Answer 4

Me gustaría intentar cambiar el CSS para no utilizar el posicionamiento absoluto. En Firefox necesitarás usar la mención de truco de envoltura en los comentarios para que el contenedor de mapas tenga la altura correcta.

div # mapcontainer {clear: both; ancho: 100%; altura mínima: 600px; }

div # main {float: left; margin-left: 10px; ancho: 500px; altura: 400px; }

div # sidebar {float: left; margin-top: 10px; margen-derecha: 10px; ancho: 155px; alto: 405px;}

Answer 5

Overflow:visible; Ese es el boleto. overflow:auto creará una barra de desplazamiento, si es necesario.