为何设置div的position为fixed会导致元素宽度异常？

你遇到的问题核心是fixed定位的元素是相对于浏览器视口定位，而非基于body。原来的.message-box-area作为容器，是继承了body的max-width和padding才保持合适宽度，但设置position:fixed后，元素脱离文档流，不再受父级或body的宽度约束，直接撑满了视口宽度。

修复方案：给fixed元素匹配body的宽度约束 #

直接修改.message-box-area的CSS，让它和body的宽度、内边距保持一致，同时居中显示：

/* message box */
.message-box-area {
  background-color: green;
  position: fixed;
  bottom: 0;
  /* 新增/修改以下属性 */
  left: 0;
  right: 0;
  max-width: 800px; /* 和body的max-width保持一致 */
  margin: 0 auto; /* 实现水平居中 */
  padding: 0 20px; /* 和body的左右padding对齐 */
  padding-bottom: 1.5em; /* 替代原来的margin-bottom，避免输入框贴死屏幕底部 */
}

原理说明 #

• left: 0; right: 0：让元素横向铺满整个视口
• max-width: 800px：限制元素最大宽度，和body的布局保持统一
• margin: 0 auto：让元素在视口中水平居中，和页面其他内容对齐
• padding: 0 20px：保持和body相同的左右内边距，避免输入框贴边缘
• 替换margin-bottom为padding-bottom：因为fixed元素脱离文档流，margin不会影响其他元素，用padding保证输入框和屏幕底部有合理间距

额外优化（可选） #

如果想让输入框占满容器可用宽度，可给表单加上flex布局：

.message-box-form {
  display: flex;
  gap: 8px; /* 输入框与按钮（若显示）的间距 */
}

#message-box {
  flex: 1; /* 让输入框自动占满剩余宽度 */
}

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