如何让分页列表的div容器保持初始高度不变？

方法一：JavaScript动态获取初始高度并设置最小高度 #

这种方法会在页面加载完成后，自动获取列表容器初始状态（显示5条数据）的高度，把这个高度设为容器的最小高度。后续切换分页时，哪怕内容更少，容器也会保持这个高度；如果小屏幕下文本换行导致5条数据的高度变化，刷新或切回第一页时也会重新计算高度，完美适配不同屏幕。

代码示例：

// 记录当前页码，根据你的分页逻辑调整
let currentPage = 1;

function setListMinHeight() {
  const list = document.getElementById('list');
  // 只有当前显示第一页时，才重新获取高度（确保是5条数据的真实高度）
  if (currentPage === 1) {
    const realHeight = list.offsetHeight;
    list.style.minHeight = `${realHeight}px`;
  }
}

// 页面加载完成后初始化
window.addEventListener('load', setListMinHeight);
// 窗口大小改变时，重新计算（适配屏幕变化）
window.addEventListener('resize', setListMinHeight);

// 分页切换函数示例，根据你的实际逻辑修改
function switchPage(pageNum) {
  currentPage = pageNum;
  // 这里写你的分页渲染逻辑：隐藏旧数据、加载新数据
  
  // 如果切回第一页，重新设置最小高度
  if (pageNum === 1) {
    setListMinHeight();
  }
}

方法二：占位元素+CSS变量 #

通过在列表容器内添加一个隐藏的占位容器，里面放5个和真实列表项样式一致的空元素，让这个占位容器的高度成为列表的最小高度基准，再用CSS变量动态传递高度值，优势是不需要频繁操作容器样式，逻辑更清晰。

1. 修改HTML结构：

<div id="list">
  <!-- 隐藏的占位容器，用来模拟5条数据的高度 -->
  <div class="list-placeholder">
    <item></item>
    <item></item>
    <item></item>
    <item></item>
    <item></item>
  </div>
  <!-- 真实列表项的容器 -->
  <div class="list-content">
    <item 1 />
    <item 2 />
    <item 3 />
    <item 4 />
    <item 5 />
  </div>
</div>

2. 添加CSS样式：

#list {
  position: relative;
  /* 用CSS变量设置最小高度 */
  min-height: var(--list-base-height);
}

.list-placeholder {
  /* 隐藏但保留高度计算 */
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 确保占位元素的样式和真实列表项容器一致 */
  padding: inherit;
  margin: inherit;
}

.list-content {
  /* 让真实内容在占位元素上方 */
  position: relative;
  z-index: 1;
}

3. JavaScript动态计算高度：

function updateBaseHeight() {
  const placeholder = document.querySelector('.list-placeholder');
  const baseHeight = placeholder.offsetHeight;
  // 将高度赋值给CSS变量
  document.documentElement.style.setProperty('--list-base-height', `${baseHeight}px`);
}

window.addEventListener('load', updateBaseHeight);
window.addEventListener('resize', updateBaseHeight);

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