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身高必须自动：

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

你已经忘记了双引号：

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

CSS / HTML Div Resizing和Table定位

3 个答案: