javascript - pantalla - height dinamico css

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 de 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.

Por el momento estoy haciendo lo siguiente, pero me complacería encontrar una alternativa menos laboriosa:

(contenedor tiene posición: relative, #main y #sidebar son position: absolute, el contenido de #sidebar no tiene 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, ya que la altura de div es siempre la altura de sus hijos.

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

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

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

Eso no permitirá que los niños floten sobre él, forzando así al div que contiene a 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>

De acuerdo, no estoy seguro de por qué estás posicionándote como eres, pero hice algo similar para un sitio web que tenía que parecer 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 tan horrible ...

Answer 2

No especificó, pero creo que tiene un problema con los elementos flotantes y desea que el contenedor en el que se encuentran tenga al menos el tamaño del elemento flotante más grande. Debería probar el siguiente hack de CSS que obliga al navegador a devolver el tamaño del elemento contenedor al tamaño de los elementos flotantes:

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

Déjame saber qué te ocurre y si esto funciona. Hay muchos otros hacks para probar, dependiendo de su navegador.

Answer 3

si está flotando el contenedor div "overflow: auto" también puede funcionar mágicamente, especialmente con respecto a todo el IE tiene una debacle de Layout

Answer 4

Intentaría cambiar el CSS para no usar 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: izquierda; margin-left: 10px; ancho: 500px; altura: 400px; }

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

Answer 5

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