Estique a altura div do filho para preencher o pai que tem altura dinâmica

94

Como pode ser visto no violino a seguir, eu tenho dois divs, contidos em um pai divque foi esticado para conter o grande div, meu objetivo é fazer com que os filhos tenham diva mesma altura.

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

css html

— Khaled
fonte

2

verifique essas perguntas: stackoverflow.com/questions/3049783/… , stackoverflow.com/questions/1575141/… , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko existem muitos no CSS, mas não no CSS3. Acho que sim.

— Mr_Green

1

@Mr_Green as diferenças em um nível fundamental entre "CSS" e CSS3 são triviais, então não vejo o problema. Este é um problema muito comum que foi questionado e respondido até a morte.

— Mike H.

1

@MikeHometchko verifique minha solução. Tenho certeza de que ninguém respondeu o mesmo antes.

— Mr_Green

47

A solução é usar display: table-cellpara trazer esses elementos embutidos em vez de usar display: inline-blockou 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>

Expandir trecho

Trabalho violino

— Senhor Verde
fonte

Isso não funciona se o elemento pai for uma célula da tabela.

— Tomáš Zato - Reintegrar Monica em

54

Use display: flexpara esticar seus 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

Adicione o seguinte CSS:

Para o div pai:

style="display: flex;"

Para div filho:

style="align-items: stretch;"

— Ayan
fonte

Eu precisava adicionar o stretchnas crianças para que o flex funcionasse para mim.

— BadHorsie de

4

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

Acho que você pode usar a tela como grade:

.parent { display: grid };

— Gelo K
fonte

Você testou sua resposta usando o mesmo código do autor da postagem original?

— Mark Stewart

Funciona e não requer nenhum CSS na criança. Isso ocorre porque uma célula CSS Grid terá autolinha e célula por padrão. Na verdade, funciona muito bem com o IE se você usar display: -ms-gridpara evitar alguns flexbugs, desde que tenha apenas um filho.

— ShortFuse

-6

Você pode fazer isso facilmente com um pouco de jQuery

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

— Levon Matevosyan
fonte

3

Embora uma vez que a janela do navegador seja redimensionada, isso irá quebrar, enquanto as do CSS ainda funcionarão.

— SharpC