如何限制Div高度？三列布局聊天应用中间列高度异常问题

你的核心问题出在两个关键点：

• Grid布局的列默认带有min-height: auto，这会让列被内部内容撑开，无视grid-auto-rows: 1fr的等高约束；
• 用position: relative配合calc计算高度的方式，依赖父元素有明确的高度值，但中间列的高度未被强制锁定，导致100%的高度计算失效，中间Div依然会随内容扩张。

修复步骤 #

1. 锁定Grid列的高度约束
   给Grid容器的所有子列添加min-height: 0，打破Grid默认的内容撑开行为，确保列高度严格遵循grid-auto-rows: 1fr的设置：

   .grid-container > * {
     min-height: 0;
   }
   

2. 重构中间列的内部布局为Flex
   放弃position: relative的方式，改用垂直方向的Flex布局分配顶部、中间、底部区域的高度，自动实现剩余空间填充，无需复杂的calc计算：

   • 中间列设置display: flex; flex-direction: column; height: 100%;
   • 顶部Div保留原有固定高度样式
   • 底部Div保留原有固定高度样式
   • 中间Div设置flex: 1; overflow-y: auto; min-height: 0;（min-height:0防止中间Div被内容撑开）

完整代码示例 #

Grid容器样式

.grid-container {
  display: grid;
  grid-template-columns: 360px auto 300px;
  grid-auto-rows: 1fr;
  /* 确保容器占满父级高度，比如视口高度 */
  height: 100vh;
}

/* 强制所有列高度受Grid约束 */
.grid-container > * {
  min-height: 0;
}

中间列内部布局

.middle-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.middle-top {
  height: calc(
    var(--users-search-height) + (var(--users-search-wrapper-height) - var(--users-search-height)) / 2
  );
}

.middle-chat {
  flex: 1;
  overflow-y: auto;
  min-height: 0; /* 关键：防止内容撑开Flex项 */
  padding: 16px; /* 可选：优化内容间距 */
}

.middle-bottom {
  height: var(--users-search-wrapper-height);
}

效果说明 #

• min-height: 0打破了Grid和Flex布局中默认的“内容优先”行为，强制元素高度受父容器约束；
• Flex布局的flex:1让中间Div自动填充顶部和底部Div之外的剩余空间，无需手动计算高度；
• overflow-y: auto在内容超出时自动显示滚动条，同时不会撑开父容器。

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