如何动态计算div高度？实现仅显示2个元素的滚动列表容器

方案1：列表项高度固定时（纯CSS实现） #

如果你的列表项高度是固定值，直接把容器高度设为2倍列表项高度即可，不需要额外计算：

/* 假设列表项固定高度为50px，带上下间距 */
.List_Item {
  height: 50px;
  margin: 8px 0;
}

.Scrollable_Wrapper {
  overflow-x: hidden;
  overflow-y: scroll;
  /* 2倍项高 + 4倍上下间距（两个项共4个间距） */
  height: calc(50px * 2 + 8px * 4);
}

方案2：列表项高度不固定时（JS动态计算） #

如果列表项高度由内容决定、无法提前固定，用JS动态获取单个项的实际高度，再乘以2赋值给容器：

.Scrollable_Wrapper {
  overflow-x: hidden;
  overflow-y: scroll;
  height: auto; /* 初始占位，后续由JS覆盖 */
}

.List_Item {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

// DOM加载完成后执行计算
document.addEventListener('DOMContentLoaded', function() {
  const wrapper = document.querySelector('.Scrollable_Wrapper');
  const firstItem = wrapper?.querySelector('.List_Item');
  
  if (wrapper && firstItem) {
    // 获取单个列表项的实际高度（包含内边距、边框）
    const itemHeight = firstItem.offsetHeight;
    // 设置容器高度为2个项的总高度
    wrapper.style.height = `${itemHeight * 2}px`;
  }
});

可选优化：自定义滚动条样式 #

如果想让滚动条更贴合设计风格，可以添加自定义样式：

.Scrollable_Wrapper::-webkit-scrollbar {
  width: 6px;
}

.Scrollable_Wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.Scrollable_Wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.Scrollable_Wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

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