CSS / HTML Div调整大小和表位置

Question

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

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

这是我的模拟图片

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

Answer 2

这是可以工作的新js小提琴https://jsfiddle.net/whp257jp/

您的html标记中有错误。 我修好了它。

<div class="wrapper">
 <div id="expand">
     <input id="btnExpand" type="button" value="Expand Blue Div"/>
  </div>
   <div id="top" >
  </div>
  <br/>

jQuery的：

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

这不是您任务的完整解决方案。 我刚刚使您的代码工作。

作为初学者，您为您付出的艰巨任务。 您需要更深入地学习css，html和jQuery才能解决此任务。

Answer 3

wrapper高度必须为auto ：

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

而且您忘记了双引号：

$("#top").height("400px");