CSS/HTML分区大小调整和表格定位

CSS/HTML Div Resizing and Table positioning

本文关键字：调整 表格 定位 HTML 分区 CSS      更新时间：2023-09-26

我有三个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>

将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>

wrapper高度必须自动：

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

你忘记了双引号：

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

这是一个新的js fiddlehttps://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来解决这个任务。

相关文章：