如何使用TailwindCSS告诉一个子Div拉伸到其父div的高度?

ar7v8xwq  于 2023-02-14  发布在  其他
关注(0)|答案(1)|浏览(178)

我有一个引脚详细信息页面,其中有两个主要的div部分。在左边的div部分中,引脚图像在那里,并且Div高度根据引脚图像高度是灵活的。右边的部分有4个主要内容:

  • 下载并重定向到目标页面
  • Pin图创建者、Pin图标题、Pin图关于等
  • 这是一个可折叠的部分。
  • 添加注解,它是粘性的,并停留在大头针的底部。
    **问题:**当我隐藏注解时(记住它们是折叠的),添加注解部分不会粘在底部,因为父div高度是fit-content,并且div高度会随着注解的隐藏而缩小!

我已经尝试了几次尝试来解决这个问题,但似乎无法解决!

尝试次数:

  • 已尝试将父高度指定为h-full
  • 已尝试h-screen
    **调试:**我写了一个类似的简化代码在沙箱中,由于原来的代码太大,它会变得混乱请检查出来here
    **注意:**我不想使用魔术值来父代div,因为图像将是灵活的,并且Div高度将基于此。在新窗口中打开沙箱生成的输出,以便您可以看到问题。!
5vf7fwbs

5vf7fwbs1#

在您的情况下,您需要使底部栏固定而不是粘性
要在Tailwind中执行此操作,请将类sticky替换为这4个类fixed bottom-0 left-2 right-2
底部的div应该如下所示:

<div className="fixed bottom-0 left-2 right-2 bg-white pb-2 pt-3 border-t-2 flex gap-3 items-center justify-center">
</div>

相关问题