javascript 通过减去其他div的高度来给予div高度

qni6mghb 于 2023-05-05 发布在 Java

关注(0)|答案(1)|浏览(148)

正如你在下面的代码中看到的，我有关于雇员的数据，我试图用HTML在一个表中显示。我想实现的是，我想把显示窗口的剩余高度赋给<tbody>。但是为了达到这个目的，我必须计算其他元素的高度。有没有办法做到这一点？

.tableFixHead {
  overflow: auto;
  /*height: 50vh;*/
  height:80vh;
}
.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  padding: 8px 16px;
}
th {
  background: #eee;
}

<div>
  <h1>EMPLOYEE DATA FOR MAY 2023</h1>
</div>
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>SR.NO</th><th>EMPLOYEE</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>6</td><td>Hritik</td></tr>
      <tr><td>7</td><td>Jay</td></tr>
      <tr><td>8</td><td>Rohit</td></tr>
      <tr><td>9</td><td>Nishant</td></tr>
      <tr><td>10</td><td>Mayur</td></tr>
      <tr><td>11</td><td>Hritik</td></tr>
      <tr><td>12</td><td>Jay</td></tr>
      <tr><td>13</td><td>Rohit</td></tr>
      <tr><td>14</td><td>Nishant</td></tr>
      <tr><td>15</td><td>Mayur</td></tr>
      <tr><td>16</td><td>Hritik</td></tr>
      <tr><td>17</td><td>Jay</td></tr>
      <tr><td>18</td><td>Rohit</td></tr>
      <tr><td>19</td><td>Nishant</td></tr>
      <tr><td>20</td><td>Mayur</td></tr>
      <tr><td>21</td><td>Hritik</td></tr>
      <tr><td>22</td><td>Jay</td></tr>
      <tr><td>23</td><td>Rohit</td></tr>
      <tr><td>24</td><td>Nishant</td></tr>
      <tr><td>25</td><td>Mayur</td></tr>
      <tr><td>26</td><td>Hritik</td></tr>
      <tr><td>27</td><td>Jay</td></tr>
      <tr><td>28</td><td>Rohit</td></tr>
      <tr><td>29</td><td>Nishant</td></tr>
      <tr><td>30</td><td>Mayur</td></tr>
      <tr><td>31</td><td>Hritik</td></tr>
      <tr><td>32</td><td>Jay</td></tr>
      <tr><td>33</td><td>Rohit</td></tr>
      <tr><td>34</td><td>Nishant</td></tr>
      <tr><td>35</td><td>Mayur</td></tr>
      <tr><td>36</td><td>Hritik</td></tr>
      <tr><td>37</td><td>Jay</td></tr>
      <tr><td>38</td><td>Rohit</td></tr>
      <tr><td>39</td><td>Nishant</td></tr>
      <tr><td>40</td><td>Mayur</td></tr>
      <tr><td>41</td><td>Hritik</td></tr>
      <tr><td>42</td><td>Jay</td></tr>
      <tr><td>43</td><td>Rohit</td></tr>
      <tr><td>44</td><td>Nishant</td></tr>
      <tr><td>45</td><td>Mayur</td></tr>
    </tbody>
  </table>
</div>

先谢谢你了。

JavaScript

来源：https://stackoverflow.com/questions/76170216/give-height-to-a-div-by-subtracting-the-height-of-other-divs

1条答案

按热度按时间

lymnna711#

你可以把表格做成两行的网格。第一个具有自动高度，第二个（tbody）占用了可用高度的其余部分。

.tableFixHead {
  overflow: auto;
  /*height: 50vh;*/
  height: 80vh;
}

table {
  display: grid;
  grid-template-rows: auto 1fr;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

<div>
  <h1>EMPLOYEE DATA FOR MAY 2023</h1>
</div>
<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th>SR.NO</th>
        <th>EMPLOYEE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>13</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>14</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>16</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>17</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>18</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>19</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>20</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>21</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>22</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>23</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>24</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>25</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>26</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>27</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>28</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>29</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>30</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>31</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>32</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>33</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>34</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>35</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>36</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>37</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>38</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>39</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>40</td>
        <td>Mayur</td>
      </tr>
      <tr>
        <td>41</td>
        <td>Hritik</td>
      </tr>
      <tr>
        <td>42</td>
        <td>Jay</td>
      </tr>
      <tr>
        <td>43</td>
        <td>Rohit</td>
      </tr>
      <tr>
        <td>44</td>
        <td>Nishant</td>
      </tr>
      <tr>
        <td>45</td>
        <td>Mayur</td>
      </tr>
    </tbody>
  </table>
</div>

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 通过减去其他div的高度来给予div高度

1条答案

相关问题

热门标签

最新问答