CSS modal 不占用父级的全高

Question

我希望弹出模式占据全高，但是当有一些溢出时它不会。

一旦用户单击卡片，就会显示弹出窗口。下面是用户在没有滚动和有滚动时点击卡片时的行为图像。

父section 设置为relative，子模态设置为absolute。

我正在使用 TailwindCSS 和 VueJS 框架。

家长

<section id="dashboard" class="flex flex-col relative w-full h-full">
    <!-- Cards and stuff -->
    <div class="flex flex-col flex-auto w-full min-h-min px-5 py-10">
        ...
    </div>
    <!-- Modal popup -->
    <SummaryPopUp v-if="popup" @popUp="toggle_popup"/>
</section>

子 [弹出]

<div class="absolute flex flex-col w-full h-full justify-center place-items-center bg-gray-400">
    <!-- Close button -->
    <button type="button">
    </button>
</div>

父高度与子模态高度

不滚动 vs 滚动

Answer 1

您有什么理由不使用 position: fixed; 而不是 absolute 吗？

因为 modal 是一个弹出窗口，所以没有理由让它对任何东西都是绝对的，因为它会覆盖屏幕，在你的情况下，它会覆盖所有东西。