Reymark Reymark - 3 months ago 9
CSS Question

CSS/HTML Div Resizing and Table positioning

I have 3 divs, the parent div, child div at the top and another on the bottom. Any help will be highly appreciated, here is what I want to achieve:

When the top div resizes/increases its size, the bottom div that contains a table will shrink but remain in its position. Please see below the mock up so that you can clearly visualize it.

Here is my Mock Up Image

Here is my JSFiddle: https://jsfiddle.net/koykoys/t09v854r/8/



$("#btnExpand").click(function(){
$(#top).css("height","400px");
});

.wrapper{
height: 73vh;
display: flex;
flex-direction: column;
border: 2px solid red;
}

#top{
border:2px solid blue;
position:relative;
height:100px
}

#bottom{
border:2px solid green;
position:relative;
height:100%"
}
table, th, td {
border: 1px solid black;
}

<div class="wrapper">
<div id "expand">
<input id = "btnExpand" type="button" value="Expand Blue Div"/>
</div>
<div id="top"></div>
</br>
<div id "Download CSV">
<button >
Download CSV of Table
</button>
</div>
<div id="bottom" style="border:2px solid green;position:relative;height:100%" >
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
</tr>
<tr>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
</table>
</div>
</div>




Answer

Set your wrapper height to auto.

$(document).ready(function(){
$("#btnExpand").click(function(){
      $('#top').animate({
        'height' : '400px'   
      });
   }); 
});
.wrapper{
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

#top{
  border:2px solid blue;
  position:relative;
  height:100px;
}
#bottom{
  border:2px solid green;
  position:relative;
  height:100%"
}
table, th, td {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
 <div id = "expand">
     <input id = "btnExpand" type="button" value="Expand Blue Div"/>
  </div>
   <div id="top"  >
  </div>
  </br>
   <div id = "Download CSV">
      <button >
      Download CSV of Table
      </button>
  </div>
  <div id="bottom" style="border:2px solid green;position:relative;height:100%" >
     <table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Firstname</th>

  </tr>
  <tr>
    <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>

  </tr>
  <tr>
    <td>Boom</td>
    <td>Panes</td> <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>


  </tr>
  <tr>
    <td>Boom</td>
    <td>Panes</td> <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>


  </tr>
  <tr>
    <td>Boom</td>
    <td>Panes</td> <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>


  </tr>
   <tr>
    <td>Boom</td>
    <td>Panes</td> <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>


  </tr>
   <tr>
    <td>Boom</td>
    <td>Panes</td> <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>
    <td>Jaranjan</td>
     <td>John</td>


  </tr>


   
</table>

     
  </div>

Comments