允许下拉菜单溢出除页脚之外的其他组件

Question

我有一个装有卡片的弹性容器。该卡片有一个下拉菜单，可以覆盖其他组件。为了让下拉菜单超出卡片的边缘，下拉菜单被设为“绝对”，但现在它也超出了页脚。

简化代码：

<div class="flex flex-col min-h-screen bg-gray-100">
  <div id="page-container" class="flex flex-wrap justify-center sm:justify-start relative">
        <div class="border rounded-lg border-gray-300 p-4 bg-white m-2 flex flex-col">
           <div>
             <div class="flex justify-between">
               <div class="font-semibold text-xl">Card</div>
               <div class="flex items-center cursor-pointer select-none">
                  <div class="inline select-none pr-8 print-hidden">
                     <div class="text-primary"><i class="far fa-code-branch pr-4"></i>Expand</div>
                        <div class="z-10 absolute rounded-b shadow">
                        <div>
                           First item
                        </div>
                         <div>
                           ...
                        </div>
                     </div>
                  </div>
               </div>
            </div>
        </div>
     </div>
   </div>
   <div class="min-h-16 py-5 bg-red text-white flex-shrink-0">
      <div class="container mx-auto">
         <div class="h-full flex-wrap flex justify-between content-center text-center">
            <div class="w-full md:w-auto">
            <img src="https://via.placeholder.com/2000x100.png" class="inline-block h-8 ml-4"></div>
         </div>
      </div>
   </div>
</div>

是否可以制作页脚，使其保留在下拉列表下方？

我可以使用 JavaScript 来确定下拉列表的最低点，并将页脚始终移到该点下方。但也许有更好的方法通过改变一些 CSS.

请参阅此 CodePen 以获取简化示例。

Answer 1

您可以将 overflow-y-scroll 添加到您拥有 z-10

的父级 div

然后像这样为下拉菜单指定 max-height max-h-[90vh]

并给页脚 z-20 看看 https://play.tailwindcss.com/TqJJRKEEkR .

允许下拉菜单溢出除页脚之外的其他组件

Allow dropdown to overflow other components, except the footer

css

tailwind-css