Altura automática en el contenedor primario con niños absolutos/fijos

Question

Estoy tratando de establecer una altura automática de un div que contenga 2 elementos secundarios, colocados de forma fija y totalmente respetuosos.

Quiero que mi contenedor principal tenga una altura automática, pero sé que es difícil ya que los elementos secundarios se sacan de la estructura de la página con sus posiciones.

He intentado establecer una altura para mi div principal que funciona, pero con mi diseño siendo sensible, cuando se reduce a móvil, la altura sigue siendo la misma donde el contenido se apila y la altura necesita aumentar con sus hijos

No estoy seguro si esto tiene sentido, no tengo mi código real en mí atm pero he hecho un violín tratar de explicar ...

http://jsfiddle.net/dPCky/

Answer 1

El div padre no puede utilizar height:auto cuando sus hijos están posicionados como absolutos/fijos.

Necesitará usar JavaScript para lograrlo.

Un ejemplo de jQuery:

var biggestHeight = 0; 
// Loop through elements children to find & set the biggest height 
$(".container *").each(function(){ 
// If this elements height is bigger than the biggestHeight 
if ($(this).height() > biggestHeight) { 
    // Set the biggestHeight to this Height 
    biggestHeight = $(this).height(); 
} 
}); 

// Set the container height 
$(".container").height(biggestHeight); 

Ejemplo de trabajo http://jsfiddle.net/blowsie/dPCky/1/

Answer 2

http://jsfiddle.net/dPCky/32/ - Un efecto similar usando float:left;

http://jsfiddle.net/dPCky/40/ - Un resultan aún más cerca a su efecto deseado.

Si está dispuesto a cambiar su html, puede hacer lo que he hecho anteriormente.

aprendí el posicionamiento de los siguientes tutoriales, que se lo recomendaría a cualquier persona que quiera convertirse en un profesional posicionamiento en html/css:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

general yo evitaría el uso de JavaScript cuando sea posible cuando se hace algo que podría tener una corrección de nivel de css o html, si está dispuesto a ajustar su html.

Answer 3

Una forma más fácil es:

$(".container").height($(document).height()); 

Answer 4

Disfrute de esta altura automático de contenedor que se adapta a cualquier dispositivo de visualización y cambio de tamaño o rotación.

Se ha probado con flotador, bloque en línea, absoluto, márgenes y relleno establecido en los niños.

<div class="autoheight" style="background: blue"> 
    <div style="position: absolute; width: 33.3%; background: red"> 
    Only 
     <div style="background: green"> 
     First level elements are measured as expected 
     </div> 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six Seven Eight Night Ten 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six 
    </div> 
</div> 

<script> 
function processAutoheight() 
{ 
    var maxHeight = 0; 

    // This will check first level children ONLY as intended. 
    $(".autoheight > *").each(function(){ 

     height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total 
     if (height > maxHeight) { 
      maxHeight = height; 
     } 
    }); 

    $(".autoheight").height(maxHeight); 
} 

// Recalculate under any condition that the viewport dimension has changed 
$(document).ready(function() { 

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

    // BOTH were required to work on any device "document" and "window". 
    // I don't know if newer jQuery versions fixed this issue for any device. 
    $(document).resize(function() { processAutoheight(); }); 

    // First processing when document is ready 
    processAutoheight(); 
}); 
</script> 

Answer 5

Un poco tarde a la fiesta, pero esto puede ayudar a alguien, ya que es la forma en que ha resuelto el problema hace poco, sin JS - si los niños mantengan su relación de aspecto que se contraen para dispositivos móviles. Mi ejemplo se refiere a hacer que una presentación de diapositivas de jQuery.cycle responda, por contexto. No estoy seguro de si esto es lo que está tratando de lograr arriba, pero involucró a niños absolutamente posicionados dentro de un contenedor que tiene un ancho de página del 100% en dimensiones móviles y explícitas en pantallas más grandes.

Puede establecer la altura del elemento principal para usar unidades de ancho de ventana (vw), por lo que la altura se adapta en relación con el ancho del dispositivo. Actualmente, el soporte es lo suficientemente amplio como para que la mayoría de los dispositivos móviles utilicen estas unidades correctamente, los errores y el soporte parcial no se relacionan con vw (sino más bien con vmin y vmax en IE). Solo Opera Mini está a oscuras.

Sin saber lo que hacen los niños entre puntos sensibles en este ejemplo (el jsfiddle tiene alturas explícitas establecidas), supongamos que la altura de los niños se reduce predeciblemente en relación con el ancho del dispositivo, lo que permite suponer con bastante altura basada en la relación de aspecto.

.container{ height: 75vw; }

http://caniuse.com/#feat=viewport-units

Ten en cuenta conocida edición # 7 en la caniuse si vas para 100vw como medida de ancho, pero aquí estamos jugando con la altura!

Answer 6

relacionada a la respuesta de @ Blowsie:

/** 
* Sets the height of a container to its maximum height of its children. This 
* method is required in case 
* 
* @param selector jQuery selector 
*/ 
function setHeightByChildrenHeight(selector) 
{ 
    $(selector).each(function() 
    { 
     var height = 0; 

     $(this).children("*").each(function() 
     { 
      height = Math.max(height, $(this).height()); 
     }); 

     $(this).height(height); 
    }); 
}; 

Answer 7

Si no desea utilizar JavaScript, podría referirse esta respuesta https://stackoverflow.com/a/33788333/1272106.

Descripción breve: duplicar un elemento y establecer la visibilidad para ocultarlo para expandir el elemento principal.