css - 在 CSS 中实现弹出窗口的布局问题

Question

您好，我的代码有一些问题。我正在尝试执行以下操作。单击 OPEN POPUP 时，这将使弹出窗口可见并覆盖整个屏幕。单击内容中的 X 时，这将关闭内容并使其再次使弹出窗口不可见。

我已经使用:target伪类实现了这一点。

您可以在此处查看演示：https ://codepen.io/loganlee/pen/Jjdjzom?editors=1100

我有两个问题。首先，OPEN POPUP 链接在屏幕顶部可见且未被.popup. 即使我已经完成了width: 100vw和height: 100vh。

.popup
{
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgba(black, .8);
  opacity: 0;
  visibility: hidden;
  padding: 10rem 0;
}

其次，.popup__content比.popup屏幕高度做得非常小的时候要高。您可以在图片中看到两者。

我想我在布局方面做错了。谢谢。

标签： csstarget

Answer 1

将这些样式添加到您的代码中……针对您的两个问题。

.popup {
  top: 0px;
  left: 0px;
  overflow-y: auto;
}