如何用Tailwind CSS实现带侧边栏的底部聊天输入框并适配宽度

问题原因 #

你遇到的问题源于两个关键点：

• 绝对定位的input_message没有相对定位的父容器作为参照，导致它的宽度计算基于整个视口而非父容器
• 直接设置w-full时，因定位参照错误，宽度会超出父容器的4/5范围

修正方案 #

这里提供两种稳定的实现方式，推荐使用flex布局方案（更符合现代流式布局逻辑）：

方案1：Flex垂直布局（推荐）

通过将消息区域设置为垂直flex容器，让消息列表自动占满剩余空间，输入框自然贴合底部并匹配父容器宽度：

<div class="flex h-screen">
  <div class="sidebar h-full w-1/5 border border-gray-500">Side Bar for chat list</div>
  <div class="h-full w-4/5 border border-gray-500 flex flex-col">
    <!-- 消息列表占满剩余高度 -->
    <div class="messages border border-gray-900 flex-1">messages list</div>
    <!-- 输入框自动匹配父容器宽度 -->
    <div class="input_message border border-gray-900">input message</div>
  </div>
</div>

方案2：绝对定位修正

如果一定要用绝对定位，需要给父容器添加relative让输入框以它为参照，再设置宽度：

<div class="flex h-screen">
  <div class="sidebar h-full w-1/5 border border-gray-500">Side Bar for chat list</div>
  <div class="h-full w-4/5 border border-gray-500 relative">
    <div class="messages border border-gray-900">messages list</div>
    <!-- 基于父容器定位，宽度匹配父容器 -->
    <div class="input_message absolute bottom-0 left-0 right-0 border border-gray-900">input message</div>
  </div>
</div>

关键说明 #

• relative：添加到父容器后，内部绝对定位元素的定位基准从视口改为该容器
• flex flex-col + flex-1：垂直flex布局下，flex-1会让消息列表自动填充输入框以外的全部可用高度，避免输入框覆盖消息内容
• left-0 right-0：替代w-full，强制输入框左右贴合父容器边缘，宽度自动匹配

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