javascript 如何使用顺风css使聊天输入粘在带有侧边栏的页面底部？

kb5ga3dv 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(164)

我试图使用顺风css做一个聊天ui。我试图创建的是一个带有消息列表视图注解的侧边栏，最后是一个发送消息的输入。我无法获得所需的视图。如果您使用顺风css运行此代码input_message div不匹配父div的宽度，当我使用w-full为input_message时，宽度变得超过父级。以下只是虚拟设计，以缓和我目前面临的问题。

<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，我已经尝试了很多东西，但似乎没有工作
先谢了！

JavaScript

来源：https://stackoverflow.com/questions/75795794/how-to-make-chat-input-stick-to-bottom-of-page-with-sidebar-using-tailwind-css

2条答案

按热度按时间

8cdiaqws1#

在本例中，我将使用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

赞(0）回复(0）举报 2023-03-21

wgx48brx2#

您可以执行类似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>

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 如何使用顺风css使聊天输入粘在带有侧边栏的页面底部？

2条答案

相关问题

热门标签

最新问答