javascript - CSS/HTML Div 调整大小和表格定位

Question

我有 3 个 div，父 div，子 div 在顶部，另一个在底部。任何帮助将不胜感激，这是我想要实现的目标:

当顶部 div 调整大小/增加其大小时，包含表格的底部 div 将缩小但保持在其位置。请看下面的模型，以便您可以清楚地看到它。

Here is my Mock Up Image

这是我的 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 1

将您的 wrapper height 设置为 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>