Decrease DIV when another DIV expands

Asked

Viewed 164 times

0

I have a div that has Collapse and a div that should only take up the space of the rest of the div major. How do I make the div that occupies the rest of the larger div decrease in height when the div with Collapse expands and does not exceed the size of the larger div? I tried with css and js but could not.

$('#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>

javascript html css div collapse

  • You want the green div on the right to track the size of the elements on the left is this?

2 answers

1

Just add a overflow: hidden; in the div listalog, because then it will hide everything that tries to push the limit height of the parent element (in this case the div listalog).

Follow a Snippet to see if it’s what you need :

.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

Thanks for the answers, I solved the problem using z-index major for the div I wanted on top and z-index smaller for the other not to appear.

Browser other questions tagged javascript html css div collapse

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