Come fare un div flottato al 100% di altezza del suo genitore?

Ecco l'HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

Ed ecco il CSS:

#inner {
  float: left;
  height: 100%;
}

Dopo l'ispezione con gli strumenti di sviluppo di Chrome, il div interno sta ottenendo un'altezza di 0px.

Come posso forzarlo ad essere il 100% dell'altezza del div genitore?

Affinché l' #outeraltezza sia basata sul suo contenuto e abbia la #innersua altezza su quello, rendi entrambi gli elementi assolutamente posizionati.

Maggiori dettagli sono disponibili nelle specifiche per la proprietà css height , ma essenzialmente #innerdevono ignorare l' #outeraltezza se #outerl'altezza è auto, a meno che non #outer sia posizionata in modo assoluto. Quindi l' #inneraltezza sarà 0, a meno che non #inner sia posizionata in modo assoluto.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

Tuttavia ... Posizionando #innerassolutamente, floatun'impostazione verrà ignorata, quindi dovrai scegliere #inneresplicitamente una larghezza e aggiungere un'imbottitura #outerper falsificare la disposizione del testo che sospetto desideri. Ad esempio, di seguito, l'imbottitura di #outerè la larghezza di #inner+3. Convenientemente (dato che l'intero punto doveva raggiungere l' #inneraltezza al 100%) non è necessario avvolgere il testo sottostante #inner, quindi sembrerà proprio #innerfluttuato.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

Ho eliminato la mia risposta precedente, poiché si basava su troppe ipotesi errate sul tuo obiettivo.

Per il genitore:

display: flex;

Dovresti aggiungere alcuni prefissi http://css-tricks.com/using-flexbox/

Modifica: l'unico inconveniente è IE come al solito, IE9 non supporta la flessibilità. http://caniuse.com/flexbox

Modifica 2: Come notato da @toddsby, allineare gli elementi è per parent e il suo valore predefinito è effettivamente stretch . Se si desidera un valore diverso per figlio, esiste la proprietà align-self.

Modifica 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

In realtà, finché l'elemento genitore è posizionato, puoi impostare l'altezza del bambino al 100%. Vale a dire, nel caso in cui non si desideri che il genitore sia posizionato in modo assoluto. Lasciami spiegare ulteriormente:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

Finché non è necessario supportare versioni di Internet Explorer precedenti a IE8, è possibile utilizzare display: table-cell per eseguire ciò:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

Ciò costringerà ogni elemento con la .innerclasse a occupare l'intera altezza del suo elemento padre.

Ho fatto un esempio per risolvere il tuo problema.

Devi creare un involucro, farlo galleggiare, quindi posizionare il div in assoluto e dargli un'altezza del 100%.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Spiegazione: Il div .right è assolutamente posizionato. Ciò significa che la sua larghezza e altezza, e le posizioni superiore e sinistra verranno calcolate in base al div genitore principale in posizione assoluta o relativa SOLO se le proprietà di larghezza o altezza sono esplicitamente dichiarate nei CSS; se non vengono dichiarate esplicitamente, tali proprietà verranno calcolate in base al contenitore principale (.right-wrapper).

Pertanto, l'altezza del 100% del DIV verrà calcolata in base all'altezza finale del contenitore e la posizione finale della posizione verticale verrà calcolata in base al contenitore principale.

Ecco un modo più semplice per ottenerlo:

1. Imposta la visualizzazione del contenitore (#outer) dei tre elementi: tabella
2. E imposta gli stessi elementi (#inner) display: table-cell
3. Rimuovi il galleggiante.
4. Successo.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Grazie a @Itay in Floated div, 100% altezza

Se sei pronto a usare un po 'di jQuery, la risposta è semplice!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Questo funziona bene per far fluttuare un singolo elemento su un lato con il 100% di altezza del suo genitore mentre altri elementi flottanti che normalmente si avvolgono vengono mantenuti su un lato.

Spero che questo aiuti gli altri fan di jQuery.

Questo è un esempio di codice per un sistema a griglia di uguale altezza.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Sopra è il CSS per div esterno

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Sopra è il div interno

Spero che questo ti aiuti

Questo mi ha aiutato.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Cambia a destra: e a sinistra: per impostare la larghezza interna # preferibile.

Un caso simile quando sono necessari più elementi figlio con la stessa altezza può essere risolto con flexbox:

https://css-tricks.com/using-flexbox/

Impostati display: flex;per gli elementi genitore e flex: 1;figlio, avranno tutti la stessa altezza.

provare

#outer{overflow: auto;}

mostra più opzioni in: Come evitare il collasso dei genitori di elementi fluttuati?