Entrar Ainda não tem acesso?
3
respostas

Deixar lado esquerdo e direito com height 100% independente do tamanho do conteudo

Referente ao curso Flexbox: posicione elementos na tela

por laiane lima hermes souza
| 227.8k xp | 34 posts
desenvolvedor junior

Boa tarde !!

Eu tenho um modal que basicamente é dividido no lado esquerdo e direito. Esses dois lados tem conteudos dinamicos, e a div principal(flex) que compoe elas tem um max-height de 75%.

O que esta acontecendo é que as divs esquerda e direita não estão ficando como tamanho 100% como eu gostaria.

Eu fiz um exemplo basicao do problema. Basicamente quero que os dois lados cubram a parte verde fundo.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   <title>Teste</title>

   <style>
      .box {
         display: flex;
         height: 200px;
         max-height: 50%;
         margin: 10%;
         background-color: aqua;
         overflow: scroll;
      }

      .item {
         width: 50%;   
      }

      .esquerda {
         background-color: brown;
      }

      .direita {
         background-color: tomato;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="item">
         <div class="esquerda">
               esquerda
         </div>
      </div>

      <div class="item">
            <div class="direita">
               direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>
               direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>

            </div>
      </div>

   </div>
</body>
</html>
3 respostas
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Laiane, acho que não entendi muito bem mas pelo que entendi você quer que a div esquerda ocupe o tamanho todo do box. Experimenta setar no css a classe item com o atributo height de 100%.

.item{
height 100%;
}

Espero ter ajudado. Bons estudos

por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

Oi Laiane, tudo bom?

A resposta do Maison te ajudou?

Você também pode tentar essa abordagem aqui:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Teste</title>

<style>
.box {
height: 200px;
max-height: 50%;
margin: 10%;
background-color: aqua;
overflow: scroll;
}
.box-flex{
display: flex;
}
.coluna-flex-esquerda {
background-color: brown;
}
.colula-flex-direita {
background-color: tomato;
}
.coluna-flex-esquerda,.colula-flex-direita {
width: 50%;
}

</style>
</head>
<body>
<div class="box">
<div class="box-flex">
<div class="coluna-flex-esquerda">
esquerda
<p>esquerda</p>
<div>
<h1>esquerda</h1>
<p>esquerda</p>
</div>
</div>
<div class="colula-flex-direita">
direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>
direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>
</div>
</div>
</div>
</body>
</html>

Qualquer problema é só falar.

Abraço

por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Laiane sua dúvida persiste ou já foi solucionada?