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 div
s 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.