Give height to a div by subtracting the height of other divs

Question

As you can see in the code below I have data on Employees which I'm trying to show in a table using HTML. What I am trying to achieve is I want to give the remaining height of the display window to <tbody>. But in order to achieve that I have to calculate the height of other elements. Is there any way to achieve this?

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

Thanks in advance.

@Justinas I don't know how to do this using JS, that's why I posted this question. — mr.Hritik, May 04 '23 at 06:39
That's why you should first try something and only than post questions: [Get height of div](https://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript), [Get height of browser window](https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions) — Justinas, May 04 '23 at 06:49

score 0 · Answer 1 · answered May 04 '23 at 09:21

You could make the table a grid with two rows. The first has auto height, the second (the tbody) takes up the rest of the height available.

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

Give height to a div by subtracting the height of other divs

1 Answers1