嵌套CSS Grid布局下overflow-y失效，输入栏被顶出视口如何解决？

核心方案：通过Grid行比例分配+高度约束实现自适应布局 #

问题根源是外层Grid未正确约束高度，且内部聊天容器未合理分配空间。以下是无需calc()、无需固定高度的实现方案：

1. 全局基础样式（消除默认边距，确保高度继承）

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 外层Grid页面容器（例如包含侧边栏+主聊天区）

.page-container {
  display: grid;
  grid-template-columns: 280px 1fr; /* 侧边栏固定宽度+主聊天区占剩余宽度 */
  height: 100vh; /* 强制容器占满视口高度 */
  overflow: hidden; /* 避免页面整体滚动 */
}

3. 主聊天区容器（Grid子项，内部实现消息滚动+输入栏固定）

用Grid布局分配内部空间：

.chat-container {
  display: grid;
  grid-template-rows: 1fr auto; /* 消息区占剩余高度，输入栏自适应自身高度 */
  height: 100%; /* 继承外层Grid子项的完整高度 */
}

也可以用Flex布局替代（效果一致）：

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

4. 消息滚动区域

.messages {
  overflow-y: auto; /* 内容超出时自动显示滚动条 */
  padding: 1.2rem;
}

5. 底部输入栏

.input-area {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

对应HTML结构示例

<div class="page-container">
  <aside class="sidebar">联系人列表</aside>
  <div class="chat-container">
    <div class="messages">
      <!-- 批量消息示例 -->
      <div class="message">你好！</div>
      <div class="message">这是一条测试消息</div>
      <!-- 重复添加足够多消息以触发滚动 -->
    </div>
    <div class="input-area">
      <input type="text" placeholder="输入消息..." />
    </div>
  </div>
</div>

原理说明 #

• 外层Grid通过height:100vh锁定整体高度，避免容器被内容无限拉伸。
• 主聊天区用1fr分配消息区高度，让它自动填充输入栏之外的所有剩余空间，输入栏仅占据自身所需高度。
• 消息区的overflow-y:auto确保内容超出时滚动，不会挤压输入栏或导致页面溢出。

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