如何使Div在不同设备分辨率下保持一致的滚动显示行为

首先得说清楚问题根源：你现在是固定了容器的height:500px，但不同分辨率/系统的字体渲染、行高默认值可能不一样，导致同样高度的容器能放下的表格行数有差异。要让显示20行后才滚动，核心是让容器高度刚好适配20行表格的总高度，而不是固定死像素值。下面给你两种可行方案：

一、纯CSS方案（推荐，无需JS） #

这种方法最简洁，通过固定表格行高，精确计算容器高度：

1. 先给表格行设置固定高度，确保每行高度一致：

#physician-table-body tbody tr {
  height: 22px; /* 你可以根据自己的需求调整这个值，比如24px */
  line-height: 22px; /* 配合height，让文字垂直居中 */
}

2. 计算容器需要的高度：如果有表头，加上表头的高度；如果没有，直接用20 * 行高，再加上表格的边框、内边距等。比如表头高度24px，每行22px，20行就是24 + 22*20 = 464px，再留点边框的空间，把容器的height改成470px左右（或者精确计算）。

另外，如果你想让表头固定、tbody滚动，可以用Bootstrap的table-fixed类优化：

<table id="physician-table-body" class="table table-bordered table-icon table-fixed" style="width:100%">
  <thead>
    <!-- 你的表头内容 -->
  </thead>
  <tbody id="physicianTableData"></tbody>
</table>

对应的CSS：

.table-fixed {
  table-layout: fixed; /* 固定列宽，避免内容拉伸行高 */
}
.table-fixed tbody {
  display: block;
  max-height: calc(22px * 20); /* 刚好装下20行的高度 */
  overflow-y: auto;
}
.table-fixed thead, .table-fixed tbody tr {
  display: table;
  width: 100%;
}

这样tbody区域固定高度，超过20行就滚动，表头还能固定在顶部，体验更好。

二、jQuery动态计算方案 #

如果你的表格行高是动态变化的（比如内容长度不一导致行高自适应），可以用jQuery动态计算每行的实际高度，再设置容器高度：

$(function() {
  // 一定要等表格数据加载完成后再执行，否则拿不到行高
  // 如果是异步加载数据，把这段代码放到数据渲染完成的回调里
  setTimeout(function() {
    // 获取第一行的总高度（包含padding、border、margin）
    var singleRowHeight = $('#physicianTableData tr:first').outerHeight(true);
    // 如果有表头，获取表头高度
    var headerHeight = $('#physician-table-body thead').outerHeight(true) || 0;
    // 计算容器需要的高度：表头高度 + 20行的总高度
    var targetContainerHeight = headerHeight + (singleRowHeight * 20);
    // 设置容器高度
    $('.col-sm-12').height(targetContainerHeight);
  }, 100); // 延迟100ms确保数据渲染，根据实际情况调整
});

注意点： #

• 必须确保表格数据已经渲染到页面上，否则tr:first可能不存在，拿不到正确的行高。如果是AJAX加载数据，直接把这段代码写到AJAX的success回调里更靠谱。
• outerHeight(true)会包含元素的padding、border和margin，计算出来的总高度更准确。

最后小建议 #

尽量把内联样式（比如style="padding-left:0px..."）移到CSS文件里，这样后期维护起来更方便，也能避免样式冲突。

内容的提问来源于stack exchange，提问作者Sandeep Bhardwaj