8

Estou utilizando o bootstrap, já tentei utilizar o display:table-cell e display:cell nas divs filhos, porém, nada funcionou, tenho duas divs, e as duas têm conteúdo dinâmico, porém preciso que as duas sempre fiquem do mesmo tamanho.

<div class='row'>
 <div class='col-xs-12 col-sm-5'>
  CONTEUDO 1
 </div>
 <div class='col-xs-12 col-sm-7'>
  CONTEUDO 2
 </div>
</div>
3
  • Eu sei fazer isso usando Flexbox, mas tenho quase certeza que isso inviabilizaria seu uso com as classes personalizadas do Bootstrap... Suas divs têm altura previsível, ou ela é variável?
    – mgibsonbr
    28/04/2015 às 1:28
  • completamente variáveis.
    – Murilo Man
    28/04/2015 às 1:45
  • Não acho que seja duplicata porque neste caso é com Bootstrap.
    – Jorge B.
    28/04/2015 às 8:05

2 Respostas 2

8

Encontrei uma solução nesse artigo (em inglês): "Bootstrap 3 responsive columns of same height". Ele cria um conjunto de classes para garantir que todas as colunas em uma linha tenham a mesma altura. As que te interessam nesse caso são:

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

(há outras para as demais resoluções - xs, md e lg - bem como outras que te dão diferentes tipos de controle)

Exemplo:

.row div {
    border: 1px solid black; // Para visualização; não usar na prática
}

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container'>
<div class='row row-same-height'>
 <div class='col-xs-12 col-sm-5 col-sm-height' contentEditable="true">
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
     <p>CONTEUDO 1</p>
 </div>
 <div class='col-xs-12 col-sm-7 col-sm-height' contentEditable="true">
  CONTEUDO 2
 </div>
</div>
</div>

Veja o exemplo em "Página toda", para ver o efeito. Coloquei as divs com contentEditable para você poder editá-las e ver como o conteúdo se adapta à altura da maior coluna, além de uma borda para auxiliar na visualização, esses artifícios não devem estar presentes no código real.

-1

No bootstrap você não é necessariamente obrigado a apenas utilizá-lo. Você pode personalizá-lo. E uma maneira de resolver seu problema é: Adicione uma nova classe em ambas as divs e em seguida crie um estilo para tal classe:

NO HTML:

<div class='row'>
 <div class='col-xs-12 col-sm-5 minha-classe'>
  CONTEUDO 1
 </div>
 <div class='col-xs-12 col-sm-7 minha-classe'>
  CONTEUDO 2
 </div>
</div>

E o CSS:

.minha-classe { min-height: 100px; height:150px; max-height:200px; } /* altura mínima de 100px, altura normal de 150px altura máxima de 200px*/
3
  • mas ambas tem conteudo dinamico, uma hora uma está 1300px e a outra esta 10px por exemplo
    – Murilo Man
    28/04/2015 às 1:44
  • Nesse caso você determina o min-height. Vou editar a resposta pra você ver.
    – carlaodev
    28/04/2015 às 1:48
  • ja utilizei tambem, não funciona, o que eu preciso é necessariamente deixar ambas na mesma altura de height, exatamente iguais.
    – Murilo Man
    28/04/2015 às 1:57

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .