CSS设置聊天输入框对齐到div底部失败问题求助

你之前尝试的方法无效的原因：

• CSS没有float: bottom这个属性值，float仅支持left、right、none三个取值，你写在HTML标签上的float="bottom"也不属于标准HTML属性，完全不会生效
• vertical-align属性仅对行内元素、行内块元素或者表格单元格生效，无法控制块级元素在父容器中的纵向对齐位置

具体修改方案 #

CSS修改

1. 你现有CSS最开头的样式规则遗漏了.chat选择器，补全后添加flex布局相关配置：

.chat {
  max-height: 1080px;
  min-height: 640px;
  max-width: 1920px;
  background-color: #daf4ff;
  border-radius: 1rem;
  border: 5px solid #444444;
  /* 新增以下两行 */
  display: flex;
  flex-direction: column;
}

2. 给.chat .container添加flex-grow: 1属性，让消息列表容器自动占满聊天框除输入框外的所有剩余空间：

.chat .container {
  overflow: overlay;
  /* 新增以下一行 */
  flex-grow: 1;
}

TSX修改

删除ChatControlls组件div标签上无效的float="bottom"属性即可，无其他修改需求。

修改完成后输入框就会自动对齐到聊天框底部，如果后续需要实现消息多的时候输入框固定在底部不跟随滚动，只需要给.message-box添加position: sticky; bottom: 0;属性即可。

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