如何基于JavaScript网格设置Div最小高度？控制台列高度适配问题

1. 固定左侧列高度为5x5网格的最大高度 #

你需要根据缩略图网格的实际尺寸计算出固定高度，赋值给.course-container的min-height，推荐用CSS变量统一管理，方便后续调整：

用CSS变量动态计算（推荐） #

先在全局定义网格相关变量：

:root {
  --grid-item-height: 80px; /* 替换为你实际的网格项高度 */
  --grid-gap: 8px; /* 替换为你实际的网格间距 */
}

然后给.course-container设置计算后的固定最小高度：

.course-container {
  min-height: calc(var(--grid-item-height) * 5 + var(--grid-gap) * 4);
}

直接写固定值 #

如果不想用变量，直接计算出5行网格的总高度（网格项高度×5 + 网格间距×4），比如网格项高100px、间距10px，就写：

.course-container {
  min-height: 540px;
}

2. 让左侧列内部元素均匀分布 #

给带控制台logo的左侧列容器添加垂直flex布局，让内部元素自动分配空间：

/* 替换为你实际的左侧列容器类名 */
.console-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%; /* 继承父容器.course-container的高度 */
}

原理说明 #

• 设置.course-container的min-height为5x5网格的总高度后，无论是否选中选项，左侧列都会保持这个固定高度，不会因内容少收缩。
• 配合justify-content: space-around的垂直flex布局，能让左侧列内的标题、logo等元素自动均匀分布在固定高度内，解决未选中时元素挤在一起的问题。

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