实现类似Facebook消息布局：滚动区域止于屏幕底部求助

要实现类似Facebook消息页的布局，核心是让页面整体高度适配视口，同时让滚动区域仅占据剩余空间，避免超出屏幕。以下是具体调整方案：

1. 重置全局样式，消除默认溢出隐患 #

浏览器默认的body边距和元素盒模型会导致布局意外超出视口，先做基础重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  overflow: hidden; /* 隐藏全局滚动条，避免页面整体溢出 */
}

2. 用Flexbox构建全屏自适应布局 #

通过Flex垂直布局，让顶部导航、中间滚动区域、底部输入框的总高度刚好填满视口：

/* 主容器，占满整个视口高度 */
.app-container {
  display: flex;
  height: 100vh;
}

/* 左侧联系人列表区域 */
.contact-list {
  width: 300px;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
}
.contact-list-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0; /* 固定头部高度，不被压缩 */
}
.contact-list-items {
  flex: 1; /* 占据列表区域剩余所有空间 */
  overflow-y: auto; /* 列表内容过多时，仅在该区域内部滚动 */
}

/* 右侧聊天区域 */
.chat-area {
  flex: 1; /* 占据容器剩余所有宽度 */
  display: flex;
  flex-direction: column;
}
.chat-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0; /* 固定聊天头部高度 */
}
.chat-messages {
  flex: 1; /* 占据聊天区域剩余所有高度 */
  padding: 16px;
  overflow-y: auto; /* 消息过多时，仅在该区域内部滚动，不会超出屏幕 */
}
.chat-input {
  padding: 16px;
  border-top: 1px solid #eee;
  flex-shrink: 0; /* 固定输入框高度 */
}

3. 核心逻辑说明 #

• 100vh强制容器高度匹配当前视口高度，确保整体布局不会超出屏幕
• flex:1让中间的消息/列表区域自动填充剩余空间，不挤压头部和底部的固定高度元素
• flex-shrink:0固定顶部、底部元素的高度，避免内容过多时被压缩变形
• overflow-y:auto仅在内容超出时显示滚动条，且滚动区域严格限制在容器内部，不会出现整体页面溢出的情况
• box-sizing:border-box确保元素的内边距、边框不会额外增加宽高，避免布局计算误差

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