如何无需计算其他元素高度，让tbody占满浏览器窗口剩余高度？

不用手动计算元素高度，用现代CSS布局就能轻松实现，推荐两种方案：

方案一：Flexbox布局 #

把整个页面容器设为垂直方向的Flex布局，让表格容器自动填充剩余空间：

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 重置默认边距，确保页面占满视口 */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* 外层容器用Flex垂直布局 */
    .page-container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* 标题容器自动适应内容高度 */
    .header {
      padding: 1rem;
    }

    /* 表格容器填充剩余空间 */
    .tableFixHead {
      flex: 1;
      overflow: auto;
    }

    /* 保留原有表头固定样式 */
    .tableFixHead thead th {
      position: sticky;
      top: 0;
      z-index: 1;
    }

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

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

    th {
      background: #eee;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <div class="header">
      <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>
  </div>
</body>
</html>

方案二：Grid布局 #

用Grid的行分配功能，同样自动填充剩余空间：

只需要修改外层容器的CSS，其他样式不变：

.page-container {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

原理说明 #

• flex:1（Flex方案）或grid-template-rows: auto 1fr（Grid方案）会让表格容器自动占据页面除标题外的所有剩余高度，完全不需要手动计算其他元素的高度。
• 保留了原有的sticky表头功能，滚动时表头会固定在顶部。
• 确保html、body和外层容器的高度设为100%，这样布局才能基于整个视口高度计算。

内容的提问来源于stack exchange，提问作者mr.Hritik