Allunga l'altezza del div figlio per riempire il genitore con altezza dinamica

94

Come si può vedere nel violino seguente, ho due divs, contenute in un genitore divche si è allungato per contenere il grande div, il mio obiettivo è rendere quei bambini divuguali in altezza.

http://fiddle.jshell.net/y9bM4/

css html

— Khaled
fonte

2

controllare queste domande: stackoverflow.com/questions/3049783/... , stackoverflow.com/questions/1575141/... , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko ce ne sono molti su CSS ma non su CSS3. Credo di si.

— Mr_Green

1

@Mr_Green le differenze a livello fondamentale tra "CSS" e CSS3 sono banali, quindi non vedo il problema. Questo è un problema molto comune che è stato chiesto e risolto fino alla morte.

— Mike H.

1

@ MikeHometchko controlla la mia soluzione. Sono sicuro che nessuno ha risposto la stessa cosa prima.

— Mr_Green

47

La soluzione è usare display: table-cellper portare questi elementi in linea invece di usare display: inline-blocko float: left.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

Espandi lo snippet

Violino funzionante

— Mr Green
fonte

Tuttavia, questo non funziona se l'elemento genitore è la cella della tabella.

— Tomáš Zato - Ripristina Monica il

54

Usa display: flexper allungare le tue divs:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

— Trong Lam Phan
fonte

18

Aggiungi il seguente CSS:

Per il div genitore:

style="display: flex;"

Per div bambino:

style="align-items: stretch;"

— Ayan
fonte

Avevo bisogno di aggiungere i stretchbambini perché il flex funzionasse per me.

— BadHorsie

4

https://www.youtube.com/watch?v=jV8B24rSN5o

Penso che tu possa usare la visualizzazione come griglia:

.parent { display: grid };

— Gelo K
fonte

Hai testato la tua risposta utilizzando lo stesso codice del poster originale?

— Mark Stewart

Funziona e non richiede alcun CSS sul bambino. Questo perché una cella CSS Grid avrà autoriga e cella per impostazione predefinita. In realtà funziona abbastanza bene con IE se usi display: -ms-gridper evitare alcuni flexbugs, purché tu abbia un solo figlio.

— ShortFuse

-6

Puoi farlo facilmente con un po 'di jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

— Levon Matevosyan
fonte

3

Anche se una volta ridimensionata la finestra del browser, si interromperà, mentre quelli CSS funzioneranno ancora.

— SharpC