Fai in modo che div (altezza) occupi l'altezza rimanente del genitore

http://jsfiddle.net/S8g4E/

Ho un container divcon due bambini. Il primo bambino ha una determinata altezza. Come posso fare in modo che il secondo bambino occupi lo "spazio libero" del contenitore divsenza dare un'altezza specifica?

Nell'esempio, il rosa divdovrebbe occupare anche lo spazio bianco.

Simile a questa domanda: come fare in modo che div occupi l'altezza rimanente?

Ma non voglio dare una posizione assoluta .

L'espansione del #downbambino per riempire lo spazio rimanente #containerpuò essere eseguita in vari modi a seconda del supporto del browser che si desidera ottenere e se o meno#up ha un'altezza definita .

Campioni

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

Griglia

Il gridlayout del CSS offre ancora un'altra opzione, anche se potrebbe non essere così semplice come il modello Flexbox. Tuttavia, richiede solo lo stile dell'elemento contenitore:

.container { display: grid; grid-template-rows: 100px }

Il grid-template-rows definisce la prima riga come 100px altezza fissa, e rimangono righe tenderanno automaticamente per riempire lo spazio rimanente.

Sono abbastanza sicuro che IE11 richieda -ms-prefissi, quindi assicurati di convalidare la funzionalità nei browser che desideri supportare.

Flexbox

Il modulo di layout a scatola flessibileflexbox di CSS3 ( ) è ora ben supportato e può essere molto facile da implementare. Poiché è flessibile, funziona anche quando #upnon ha un'altezza definita.

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

È importante notare che il supporto di IE10 e IE11 per alcune proprietà flexbox può essere difettoso e IE9 o versioni precedenti non hanno alcun supporto.

Altezza calcolata

Un'altra facile soluzione è utilizzare l' unità funzionale CSS3calc , come sottolinea Alvaro nella sua risposta , ma richiede che l'altezza del primo figlio sia un valore noto:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

È ampiamente supportato, con le uniche eccezioni degne di nota: <= IE8 o Safari 5 (nessun supporto) e IE9 (supporto parziale). Alcuni altri problemi includono l'uso di calc in combinazione con transform o box-shadow , quindi assicurati di testare in più browser se questo ti preoccupa.

Altre alternative

Se è necessario un supporto precedente, è possibile aggiungere height:100%;a #downrenderà il div rosa a tutta altezza, con un avvertimento. Provocherà un trabocco per il contenitore, perché lo #upsta spingendo verso il basso.

Pertanto, potresti aggiungere overflow: hidden;al contenitore per risolverlo.

In alternativa, se l'altezza di #upè fissa, puoi posizionarlo assolutamente all'interno del contenitore e aggiungere un padding-top a #down.

E un'altra opzione sarebbe quella di utilizzare un display da tavolo:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

Sono passati quasi due anni da quando ho posto questa domanda. Ho appena inventato css calc () che risolve questo problema e ho pensato che sarebbe stato bello aggiungerlo nel caso qualcuno avesse lo stesso problema. (A proposito, ho finito per usare la posizione assoluta).

http://jsfiddle.net/S8g4E/955/

Ecco il css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

E maggiori informazioni al riguardo qui: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Supporto browser: http://caniuse.com/#feat=calc

La mia risposta usa solo CSS e non usa overflow: hidden o display: table-row. Richiede che il primo bambino abbia davvero una determinata altezza, ma nella tua domanda affermi che solo il secondo bambino deve avere la sua altezza non specificata, quindi credo che dovresti trovarlo accettabile.

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

css

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

controlla la demo - http://jsfiddle.net/S8g4E/6/

usa css -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

A meno che io non abbia frainteso, puoi semplicemente aggiungere height: 100%;e overflow:hidden;a #down.

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

Dimostrazione dal vivo

Modifica: poiché non si desidera utilizzare overflow:hidden;, è possibile utilizzare display: table;per questo scenario; tuttavia, non è supportato prima di IE 8. ( display: table;supporto )

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

Dimostrazione dal vivo

Nota: hai detto che vuoi che l' #downaltezza sia l' #containeraltezza meno l' #upaltezza. La display:table;soluzione fa esattamente questo e questo jsfiddle lo rappresenterà abbastanza chiaramente.

Puoi usare i float per spingere il contenuto verso il basso:

http://jsfiddle.net/S8g4E/5/

Hai un contenitore di dimensioni fisse:

#container {
    width: 300px; height: 300px;
}

Il contenuto può scorrere accanto a un galleggiante. A meno che non impostiamo il float su tutta la larghezza:

#up {
    float: left;
    width: 100%;
}

Mentre #upe #downcondividi la prima posizione, #downil contenuto di può iniziare solo dopo la fine del floated #up:

#down {
    height:100%;
}​

Astratto

Non ho trovato una risposta completamente soddisfacente, quindi ho dovuto scoprirla da solo.

Le mie esigenze:

• l'elemento dovrebbe occupare esattamente lo spazio rimanente o quando la dimensione del suo contenuto è minore o maggiore della dimensione dello spazio rimanente (nel secondo caso dovrebbe essere mostrata la barra di scorrimento );
• la soluzione dovrebbe funzionare quando l' altezza genitore è calcolata e non specificata ;
• calc()non dovrebbe essere usato poiché l'elemento rimanente non dovrebbe sapere nulla delle dimensioni di un altro elemento;
• dovrebbe essere utilizzata una tecnica di layout moderna e familiare come i flexbox .

La soluzione

• Trasforma in flexbox tutti i genitori diretti con altezza calcolata (se presente) e il genitore successivo la cui altezza è specificata ;
• Specifica flex-grow: 1a tutti i genitori diretti con altezza calcolata (se presente) e l'elemento in modo che si occupano tutto lo spazio rimanente quando la dimensione contenuto dell'elemento è minore;
• Specificare flex-shrink: 0a tutti gli elementi di flessione con altezza fissa in modo da non diventare più piccolo quando la dimensione dei contenuti elemento è più grande della dimensione spazio rimanente;
• Specificare overflow: hiddena tutti i genitori diretti con altezza calcolata (se presente) per disabilitare lo scorrimento e impedire la visualizzazione di contenuto in eccesso;
• Specificare overflow: autoper l'elemento per consentire lo scorrimento al suo interno.

JSFiddle (l'elemento ha genitori diretti con altezza calcolata)

JSFiddle (caso semplice: nessun genitore diretto con altezza calcolata)

Non sono sicuro che possa essere fatto esclusivamente con i CSS, a meno che non ti senta a tuo agio nel fingere con illusioni. Forse usa la risposta di Josh Mein e imposta #containersu overflow:hidden.

Per quello che vale, ecco una soluzione jQuery:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);