如何使包含textarea的div固定在屏幕底部，不随消息内容下移

要让包含textarea和按钮的div固定在屏幕底部，不受页面消息内容增减的影响，只需修改CSS的定位属性即可，具体操作如下：

修改核心CSS样式 #

给.messageText添加固定定位属性，替换掉原来的margin-top：

.messageText {
  align-items: center;
  justify-content: center;
  display: flex;
  /* 关键：固定定位到浏览器视口底部 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 添加内边距，避免输入框贴屏幕边缘 */
  padding: 1rem;
  /* 可选：添加背景色，和页面背景区分开，防止输入框后内容透出来 */
  background-color: #ffffff;
}

.messageText textarea {
 border-radius: 6px;
 border: none;
 outline: none;
 width: 50%;
 height: 10vh;
 background-color: #3d3939;
 color: #fff; 
}

.messageText button {
  height: 10vh;
  width: 10vh;
  background-color: #ff914d;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1rem;
}

补充处理：避免页面内容被遮挡 #

输入框固定在底部后会覆盖页面最下方的消息内容，因此需要给存放消息的容器（比如页面中的消息列表div）添加底部内边距，值要大于等于输入框的高度加上内边距：

/* 假设你的消息列表容器类名为message-container */
.message-container {
  padding-bottom: 12vh;
}

关键说明 #

• position: fixed会让元素脱离正常文档流，始终相对于浏览器视口定位，因此不会随页面内容滚动或增减而移动。
• bottom: 0、left: 0、right: 0确保元素横向铺满视口底部，配合flex布局让输入框和按钮居中。
• 移除原来的margin-top，因为固定定位后这个属性会导致元素位置偏移。

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