query - responsive html

Altura automática en el contenedor principal con Absolute/Fixed Children

Question

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

Quiero que mi contenedor principal tenga una altura automática pero sé que esto 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 sensible, cuando se reduce a móvil, la altura sigue siendo la misma donde el contenido dentro se apila y la altura necesita aumentar con sus hijos.

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

http://jsfiddle.net/dPCky/

Answer 1

Disfrute de esta altura automática para el contenedor que se adapta a cualquier dispositivo y cambio de tamaño o rotación de la ventana gráfica.

Se ha probado con flotante, bloque en línea, absoluto, márgenes y relleno establecidos para 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 2

Relacionado con @ Blowsie''s answer:

/**
 * 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 3

Si no desea usar JavaScript, puede referir esta respuesta a https://.com/a/33788333/1272106 .

Breve descripción: duplicar un elemento y establecer la visibilidad para ocultar para expandir el elemento principal.

Answer 4

Un poco tarde para la fiesta, pero esto puede ayudar a alguien ya que así es como resolví el problema recientemente sin JS - SI los niños mantienen su relación de aspecto a medida que se reducen 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 configurar la altura de los padres para usar unidades de ancho de vista (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 receptivos en este ejemplo (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 le permite asumir con bastante precisión la altura según el aspecto proporción.

.container{ height: 75vw; }

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

Tenga en cuenta el problema # 7 conocido en caniuse si va a 100vw como una medida de ancho, ¡pero aquí estamos jugando con altura!

Answer 5

Una forma más fácil es:

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

Answer 6

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

http://jsfiddle.net/dPCky/40/ - Un resultado aún más cercano al efecto deseado.

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

Aprendí el posicionamiento de los siguientes tutoriales que recomiendo encarecidamente a cualquiera que quiera convertirse en un profesional de posicionamiento en html / css:

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

Por lo general, evitaría usar javascript cuando sea posible al hacer algo que podría tener una corrección de nivel css o html, si está dispuesto a ajustar su html.

Answer 7

El div principal no puede usar height:auto cuando sus hijos están en posición absoluta / fija.

Necesitarás usar JavaScript para lograr esto.

Un ejemplo en 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/