Bootstrap5聊天输入框固定屏幕底部后列未占满横向空间怎么解决

问题根因 #

设置了position: absolute的元素默认宽度由内容撑开，不会自动继承父容器宽度；同时当前输入行的绝对定位相对于全局视口，没有限定在右侧聊天区域内，也会导致宽度不符合预期。

解决方案 #

按以下两步修改代码即可：

• 给右侧聊天区域的父容器（class="col bg-secondary"的div）添加position-relative类，限定输入行的绝对定位范围在当前区域内
• 给底部输入行添加w-100类，强制占满父容器的100%横向宽度

修改后的对应代码片段如下：

<div class="col bg-secondary position-relative">
  <div class="row bg-success d-flex align-items-start flex-column vh-100 pb-3">
    ff
  </div>

  <div class="row d-flex position-absolute bottom-0 w-100">
    <div class="col bg-danger">ff</div>
    <div class="col">ff</div>
    <div class="col">ff</div>
  </div>
</div>

补充优化 #

上方消息区域设置了vh-100占满视口高度，底部固定的输入行会遮挡消息区域最底部的内容，你可以根据输入行的实际高度给消息区域添加对应的底部内边距（示例中加了pb-3可按需调整），避免内容被遮挡。

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