0

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>

4
  • Não funciona. Já tinha tentado isso
    – Phelipe
    Commented 13/02/2018 às 20:34
  • Não funcionou. Estou tentando adaptar o código que vc colocou mas ainda sem sucesso.
    – Phelipe
    Commented 13/02/2018 às 20:47
  • Não. apenas em telas de tamanho grande. Em dispositivos moveis ela vai ficar acima do conteúdo da direita.
    – Phelipe
    Commented 13/02/2018 às 20:56
  • Na documentação tem um exemplo. No momento estou limitado a responder.
    – NoobSaibot
    Commented 13/02/2018 às 21:01

3 Respostas 3

1

Como o wmsouza indicou, o link ensina o motivo do problema e como resolver. Além do mais, escrevi um snippet com comentários, para você adaptar a sua situação.

html {
    height: 100%; /* Hack */
}

body, .container-fluid {
    height: 100%; /* Hack */
}

.row {
    height: 100%; /* Escolha uma altura para a row */
}

.a {
  background: yellow;
  height: 100%; /* Coluna *.a* vai seguir 100% da altura da row */
}

.b {
  background: red;
}

@media screen and (max-width: 570px){
  .row {
      height: auto; /* Row tem altura do conteúdo, em dispositivos com 570px*/
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  
  <body>
  
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-4 a">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        <div class="col-xs-8 b">direita</div>
      </div>
    </div>

  </body>
</html>

2
  • Não era exatamente isso que queria. O conteúdo da esquerda tem que passar para cima em telas pequenas. Mas já consegui resolver o problema. Inclusive coloquei a resposta. Obrigado pelo tempo de responder.
    – Phelipe
    Commented 13/02/2018 às 21:28
  • Beleza. Só edita a descrição, pra ficar mais claro para quem tiver com essa dúvida.
    – user54824
    Commented 13/02/2018 às 21:29
0
position: absolute;
top: 0;
left:0;
bottom: 0;
rigth:0;
width:100%;
1
  • Essa solução não é a ideal pois em telas menores quero o layout fica confuso.
    – Phelipe
    Commented 13/02/2018 às 20:25
0

Encontrei a solução com o seguinte código:

.main-wrapper {
  height: 100vh;
}

.section {
  height: 100%;
  background-color: red;
}

@media (max-width: 768px) {
  .section {
    height: auto;
    background-color: red;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="main-wrapper">
  <div class="col-sm-4 section">
    <div class="esquerda">
      Conteudo da esquerda
    </div>
  </div>
  <div class="col-sm-8">
    <div class="direita">
      Conteudo da direita
    </div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

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