Place div height at 100%

Asked

Viewed 1,286 times

0

I’m putting together a layout using Bootstrap 3 and wanted to put together a layout more or less like this:

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

And when moving to smaller screens (768px or smaller) the layout should be as follows:

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

My difficulty is in placing the height of the element to the left (dashed) with height 100%. on large screens and, when moving to small screens, get the height of the internal content. How can I do this? Follow the code I am 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>

html css twitter-bootstrap

  • It doesn’t work. I’ve tried that

  • It didn’t work. I’m trying to adapt the code you put in but still unsuccessful.

  • No. only on large sized screens. On mobile devices it will stay above the contents on the right.

  • In the documentation there is a example. At the moment I’m limited to responding.

3 answers

1

As the wmsouza indicated, the link teaches the reason for the problem and how to solve it. Besides, I wrote a snippet with comments, so you can adapt your situation.

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>

  • That’s not exactly what I wanted. The content on the left has to go up on small screens. But I’ve already solved the problem. I even put the answer. Thank you for the time to reply.

  • Beauty. Just edit the description, to be clearer for those who have this doubt.

0

position: absolute;
top: 0;
left:0;
bottom: 0;
rigth:0;
width:100%;

  • This solution is not ideal because on smaller screens want the layout gets confused.

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>

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.