Altezza automatica sul contenitore genitore con figli assoluti/fissi

Question

Sto cercando di impostare un'altezza automatica a div che contenga 2 elementi figlio, posizionati fissi e assolutamente rispettosi.

Voglio che il mio contenitore genitore abbia un'altezza automatica, ma so che questo è difficile poiché gli elementi figlio vengono estratti dalla struttura della pagina con le loro posizioni.

Ho provato ad impostare un'altezza per il mio genitore div che funziona, ma con il mio layout reattivo, quando ridimensionato al mobile, l'altezza rimane la stessa dove il contenuto all'interno si impila e quindi l'altezza deve aumentare con i suoi figli.

Non sono sicuro se questo ha un senso, non ho il mio codice vero e proprio su di me atm ma Ive ha fatto un violino cercando di spiegare ...

http://jsfiddle.net/dPCky/

Answer 1

Il div genitore non può utilizzare height:auto quando i suoi figli sono posizionati in modo assoluto/fisso.

Per raggiungere questo obiettivo è necessario utilizzare JavaScript.

Un esempio in 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); 

esempio Lavorare http://jsfiddle.net/blowsie/dPCky/1/

Answer 2

http://jsfiddle.net/dPCky/32/ - Un effetto simile usando float:left;

http://jsfiddle.net/dPCky/40/ - Un risultato ancora più vicino al vostro effetto desiderato.

Se sei disposto a cambiare il codice html, puoi fare ciò che ho fatto sopra.

ho imparato il posizionamento tra le seguenti esercitazioni, che consiglio vivamente a chi vuole diventare un professionista posizionamento in html/css:

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

Io in genere evitare l'uso di javascript, se possibile, quando si fa qualcosa che potrebbe potenzialmente avere una correzione di css o html, se sei disposto a modificare il tuo html.

Answer 3

Un modo più semplice è:

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

Answer 4

Godetevi questa altezza auto per il contenitore che si adatta a qualsiasi ridimensionamento del dispositivo e della vista o la rotazione.

È stato testato con float, blocco inline, assoluto, margini e riempimento impostato sui childs.

<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 po 'tardi alla festa, ma questo può aiutare qualcuno come questo è come ho risolto il problema di recente, senza JS - se i bambini mantenere le sue proporzioni come si restringono per i dispositivi mobili. Il mio esempio si riferisce alla creazione di una presentazione jQuery.cycle reattiva, per il contesto. Non sono sicuro se questo è ciò che stai cercando di ottenere sopra, ma ha coinvolto bambini posizionati in modo assoluto all'interno di un contenitore che ha il 100% della larghezza della pagina su dimensioni mobili ed esplicite su schermi più grandi.

È possibile impostare l'altezza del genitore per utilizzare le unità di larghezza del viewport (vw), quindi l'altezza si adatta alla larghezza del dispositivo. Al giorno d'oggi il supporto è abbastanza ampio che la maggior parte dei dispositivi mobili utilizzerà correttamente queste unità, i bug e il supporto parziale non si riferiscono a vw (ma piuttosto a vmin e vmax in IE). Solo Opera Mini è al buio.

Senza sapere cosa stanno facendo i bambini tra i punti di risposta in questo esempio (il jsfiddle ha altezze esplicite impostate), supponiamo che l'altezza dei bambini riduca in modo prevedibile rispetto alla larghezza del dispositivo, che consente di assumere in modo abbastanza accurato il altezza basata su proporzioni.

.container{ height: 75vw; }

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

Do atto problema noto # 7 su caniuse se si sta andando per 100vw come misura di larghezza, ma qui stiamo giocando con l'altezza!

Answer 6

correlati a @ risposta di 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

Se non si desidera utilizzare JavaScript, si potrebbe fare riferimento questa risposta https://stackoverflow.com/a/33788333/1272106.

Breve descrizione: duplica un elemento e imposta la visibilità da nascondere per espandere il genitore.