尽管表格容器高度固定，但表格行仍占用额外空间（超出设定高度）

Question

几天以来我一直在项目中调试这个问题。整个调试过程让我非常痛苦。您将看到该错误是独立的，因此您可能没有意识到在成熟的实时项目中调试此类问题有多么困难。但无论如何，几天前我就遇到了这个错误。请注意，在项目中我在全局范围内使用 materialize-css 进行样式设置。

什么是错误？

对于 UI 增强，要求是制作一个具有固定高度和滚动行为的表格组件，以便用户无需滚动整个表格即可到达页面上的“下一步”按钮。因此，我将

height: 60vh; overflow-y: auto;

css 应用于上述表格组件（请注意，这是我正在处理的自定义表格 Web 组件）。但是，事实证明，页面布局受到干扰，因为不可见区域中的表格行仍然占据页面上的一些空间，这导致页面显示页面上可见的绝对空白空间的垂直滚动条。您实际上可以通过检查表格来将表格行定位在不可见区域中，并看到它们超出了上述空白区域中 60vh 的固定高度。使用下面的代码片段重现该错误。

（代码笔：https://codepen.io/Utsav-Tayde/pen/rNXmxEo）

div {
  padding: 2rem;
  margin: 2rem;
  height: 60vh;
  overflow-y: auto;
}

// Materialize CSS Plugins
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div>
  <table>
    <thead>
      <th></th>
      <th>Name</th>
      <th>Role</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <!-- Repeat the above <tr> element 30-40 times to make table long. -->
    </tbody>
  </table>
</div>

调试过程

当我发现这种行为时，我做的第一件事就是怀疑我的 html-css 知识。我想这可能不是固定桌子高度的正确方法。所以，我花了相当长的时间来研究这方面。一旦我确认我正在做的事情是修复表格高度的正确方法，我就开始怀疑网络组件，并从字面上重构并重写了整个事情。尽管如此，这个问题仍然完好无损。直到此时，我已经非常生气了。尽管如此，我开始在独立环境中进行实验。在此过程中，我注意到系统中的另一个表组件没有出现此问题。所以，我以这种方式指导我的调查。我开始发现这两个表格组件之间的关键区别。就在那里，我发现受影响的表格组件每行都有复选框（输入）。并按照上述方向进行大量调试，快进...我发现 Materialise CSS 样式表将“position:absolute”规则应用于复选框输入。当我通过开发工具将其更改为“位置：静态”时......我的错误得到了解决。呃..！经过4-5天的调试，满意度达到顶峰。

最后，我只是在代码中进行了更改，将内联样式应用于复选框，以便它将覆盖 Materialize 样式，然后就完成了。我希望这对您有帮助。

Answer 1

你的错误是使用overflow-y到div，你是说你需要div内的表格有滚动条（而不是div），所以你需要使用overflow-y到表格，但表格不能有滚动条，如第一个答案中所述here，您可以在那里实现任何答案，但我建议您使用this，它不会影响高度、宽度等。没有副作用..

div {
  padding: 2rem;
  margin: 2rem;
  height: 60vh;
}

/*Main*/
table {
  display: flex !important;
  flex-flow: column;
  height: 100%;
  overflow-y: scroll;
}
tr {
  width: 100%;
  display: table;
}

/*extras*/
thead {
  flex: 0 0 auto;
}
tbody {
  flex: 1 1 auto;
  display: block;
}

// Materialize CSS Plugins
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div>
  <table>
    <thead>
      <th></th>
      <th>Name</th>
      <th>Role</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>
            <input type='checkbox' />
            <span></span>
          </label>
        </td>
      </tr>
      <!-- Repeat the above <tr> element 30-40 times to make table long. -->
    </tbody>
  </table>
</div>