Estou montando um layout usando o Bootstrap 3 e queria montar um layout mais ou menos assim:
+-------------+---------------------------------+
+-------------+ +
+-------------+ +
+---height----+ Conteúdo aqui +
+----100%-----+ +
+-------------+ +
+-------------+ +
+-------------+---------------------------------+
E ao passar para telas menores (768px ou menor) o layout deve ficar da seguinte forma:
+-----------------------------------------------+
+--------------height do elemento---------------+
+-----------------------------------------------+
+ Conteúdo aqui +
+ +
+ +
+-----------------------------------------------+
Minha dificuldade está em colocar a altura do elemento a esquerda (tracejado) com altura 100%. em telas grandes e, ao passar para telas pequenas, ficar da altura do conteúdo interno. Como posso fazer isso? Segue o código que estou usando.
.esquerda {
background-color: red;
height: 100%;
}
.direita {
background-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-4">
<div class="esquerda">
Conteudo da esquerda
</div>
</div>
<div class="col-sm-8">
<div class="direita">
Conteudo da direita
</div>
</div>
</div>