Chatbot布局求助：输入框固定底部及响应式适配问题

核心解决方案：Flexbox 布局（推荐） #

Flexbox 是实现这类响应式固定布局最简洁的方式，能让输入区域始终固定在视口底部，聊天内容区域自动填充剩余空间且支持滚动。

代码实现

/* 全局重置，消除默认边距和盒模型影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外层容器占满整个视口高度，垂直排列子元素 */
#chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 聊天内容区域自动填充剩余空间，内容过多时滚动 */
#chat {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #f5f5f5;
}

/* 输入区域横向排列输入框和按钮，固定在底部 */
#input-area {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #ddd;
  background-color: #fff;
}

/* 输入框占满输入区域的剩余宽度 */
#message-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 发送按钮固定尺寸 */
#send-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

方案优势

• 100vh 确保容器完全适配当前视口高度，响应式适配各种屏幕尺寸。
• flex: 1 让聊天区域自动挤压剩余空间，输入区域始终固定在底部，不会被挤到视口外。
• 垂直缩小窗口时，输入区域始终保持在视口底部无需滚动查看，聊天区域会自动缩小并出现滚动条容纳内容。

备选方案：Grid 布局 #

如果更习惯 Grid 语法，也可以用以下方式实现相同效果：

#chat-container {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行填充剩余空间，第二行自适应高度 */
  height: 100vh;
}

#chat {
  overflow-y: auto;
  padding: 15px;
  background-color: #f5f5f5;
}

#input-area {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #ddd;
  background-color: #fff;
}

/* 输入框和按钮样式同 Flex 方案 */

注意事项 #

• 若页面存在顶部导航栏，需调整容器高度为 calc(100vh - 导航栏高度)，避免输入区域被遮挡。
• 确保外层容器没有额外的 margin 或 padding，否则会导致视口溢出，全局设置 box-sizing: border-box 可避免这类问题。

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