Set div height to 100%

Navigation
0

I'm putting together a layout using Bootstrap 3 and wanted to do a layout like this: 

+-------------+---------------------------------+
+-------------+                                 +
+-------------+                                 +
+---height----+          Conteúdo aqui          +
+----100%-----+                                 +
+-------------+                                 +
+-------------+                                 +
+-------------+---------------------------------+

And when moving to smaller screens (768px or smaller) the layout should look like this: 

+-----------------------------------------------+
+--------------height do elemento---------------+
+-----------------------------------------------+
+                Conteúdo aqui                  +
+                                               +
+                                               +
+-----------------------------------------------+

My difficulty is to put the height of the element to the left (dashed) with height 100%. on large screens, and when moving to small screens, stay as high as the internal contents. How can I do this? Here is the code I'm using. 

.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>
    
asked by anonymous 13.02.2018 / 21:12

3 answers

0

I found the solution with the following code: 

.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>
    
13.02.2018 / 22:21
1

As wmsouza has indicated, the link teaches the reason for the problem and how to solve it. What's more, I've written a snippet with comments to suit you. 

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>
    
13.02.2018 / 22:19
0
position: absolute;
top: 0;
left:0;
bottom: 0;
rigth:0;
width:100%;
    
13.02.2018 / 21:18
System.NullReferenceException: 'Object reference not set to an instance of an object Can ExpressJS be used in production?