0

Tenho uma div que tem collapse e outra div que apenas deve ocupar o espaço do resto da div maior. Como faço para que a div que ocupa o resto da div maior diminua de altura quando a div com collapse se expande e não ultrapasse o tamanho da div maior? Tentei com css e js mas não consegui.

$('#menu').height($('#listalog').height()-$('#navegar').height());
.container{
   height: 400px;
   background-color: black;
}

#listalog{
   border: 2px;
   border-color: black;
   height: 168px;
   max-height: 168px;
   background-color: green;
   width: 500px;
   
}

#navegar{
   height: auto;
   background-color: red;
   width: 300px;
   overflow: auto;
}


#menu{
   background-color: blue;
   height: 100%;
   width: 300px;
}
<html lang="en">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

   <link rel="stylesheet" type="text/css" href="style.css">
     
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
 </head>
 <body>
 
     <div class="container-fluid">
         <div class="row">
           <div id="listalog">
             <div id="navegar">
                 <ul class="nav flex-column">
                   <li>
                   <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                     Collapsible Group Item #1
                   </a>
                   <div id="collapseOne" class="collapse">
                   <a href="#">teste1</a><br>
                   <a href="#">teste2</a>
                 </div>
                 </li>
                   <li>
                   <a role="button" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                     Collapsible Group Item #1
                   </a>
                   <div id="collapse2" class="collapse">
                   <a href="#">teste1</a><br>
                   <a href="#">teste2</a>
                 </div>
                 </li>
                   <li>
                   <a role="button" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
                     Collapsible Group Item #1
                   </a>
                   <div id="collapse3" class="collapse">
                   <a href="#">teste1</a><br>
                   <a href="#">teste2</a>
                 </div>
                 </li>
               </ul>
             </div>
             <div id="menu">xx</div>
         </div>
         </div>
     </div>
     
     
 
   
 </body>
</html>

1
  • Vc quer que a div verde a direita acompanhe o tamanho dos elementos a esquerda é isso?
    – hugocsl
    Commented 18/05/2019 às 22:19

2 Respostas 2

1

Apenas adicione um overflow: hidden; na div listalog, pois assim, irá ocultar tudo o que tentar avançar o limite height do elemento pai (nesse caso, a div listalog).

Segue um Snippet para conferir se é o que precisa :

.container {
  height: 400px;
  background-color: black;
  max-height: 400px;
}

#listalog {
  border: 2px;
  border-color: black;
  height: 168px;
  max-height: 168px;
  background-color: green;
  overflow: hidden;
  clear: both;
  width: 500px;
}

#navegar {
  height: auto;
  background-color: red;
  width: 300px;
  overflow: auto;
}

#menu {
  background-color: blue;
  height: 100%;
  width: 300px;
}
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="listalog">
        <div id="navegar">
          <ul class="nav flex-column">
            <li>
              <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                     Collapsible Group Item #1
                   </a>
              <div id="collapseOne" class="collapse">
                <a href="#">teste1</a><br>
                <a href="#">teste2</a>
              </div>
            </li>
            <li>
              <a role="button" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                     Collapsible Group Item #1
                   </a>
              <div id="collapse2" class="collapse">
                <a href="#">teste1</a><br>
                <a href="#">teste2</a>
              </div>
            </li>
            <li>
              <a role="button" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
                     Collapsible Group Item #1
                   </a>
              <div id="collapse3" class="collapse">
                <a href="#">teste1</a><br>
                <a href="#">teste2</a>
              </div>
            </li>
          </ul>
        </div>
        <div id="menu">xx</div>
      </div>
    </div>
  </div>




</body>

</html>

0

Obrigada pelas respostas, resolvi o problema usando z-index maior para a div que queria por cima e z-index menor para a outra não aparecer.

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 .