如何使用 tailwind css 将聊天输入粘贴到带有侧边栏的页面底部？

Question

我正在尝试使用 tailwind css 制作聊天 ui。我想要创建的是一个带有消息列表视图注释的侧边栏，最后是一个用于发送消息的输入。我无法获得所需的视图。如果您使用 tailwind css 运行此代码

input_message

div 与父 div 的宽度不匹配，同样当我将

w-full

用于

input_message

时，宽度变得超过父 div。以下只是虚拟设计来缓和我目前面临的问题。

<div class="flex h-screen">
  <div class="sidebar m-0 h-full w-1/5 border border-gray-500">Side Bar for chat list</div>
  <div class="m-0 h-full w-4/5 border border-gray-500">
    <div class="messages border border-gray-900">messages list</div>
    <div class="input_message absolute bottom-0 border border-gray-900">input message</div>
  </div>
</div>

尝试相同的链接：https://play.tailwindcss.com/aERqae8v1B

任何人都可以告诉我相同的解决方案吗？我想要的是使

input_message

宽度与父母的宽度相同。我是 html 和 css 的新手，我尝试了很多东西，但似乎没有任何效果

提前致谢！

Answer 1

在这种情况下，我将使用 grid 和 flex。 像这样的东西：

<div class="grid grid-cols-5 grid-rows-1 ">
  <div class="sidebar border-gray-500 bg-slate-500">
    Side Bar for chat list
  </div>
  <div class="flex flex-col justify-between w-full h-screen col-span-4">
    <div class="messages w-full border border-gray-90">
      messages list
    </div>
    <div class="inputmessage w-full border border-gray-900">
      input message
    </div>
  </div>
</div>

https://play.tailwindcss.com/x119T4d7JQ

Answer 2

你可以做像this

这样的事情

<div class="flex">
  <div class="w-1/5 border-2 h-screen">
      Sidebar for chat box
  </div>
  <div class="flex w-full flex-col justify-between ">
    <div class="border-2">Messages List</div>
    <div class="border-2">input chat box List</div>
  </div>
</div>