html - CSS模式后退不会占用整个屏幕

我希望CSS中的模态背景占据整个屏幕（即，除了模态内容本身之外，整个屏幕都被遮盖了）。我认为这可能与我根据vh和vw指定其他div的宽度和高度有关。这是我的代码：

#modal {
  z-index: 1;
  position: fixed;
  left: 40%;
  right: 30%;
  top: 10%;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
}

#modal button {
  height: 40px;
  font: Hind Siliguri;
  font-weight: bold;
  border: 2px solid white;
  border-radius: 5px;
  margin: 5px;
}

<span id="modal">
    <h2>Choose a word: </h2>
    <button id = "choice1">Word1</button><button id= "choice2">Word2</button><button id = "choice3">Word3</button>
  </span>

这是我根据vw / vh分配尺寸的其他元素：

#verbal-hint-container{
  margin-right: 50%;
  height: 30vh;
  width: 40vw;
  background-color: #C3D898;
  border: 5px solid #160F29;
  border-radius: 2px;
}

verbal-hint-container只是一个包含实例化消息的div（来自髭库）。

我的直觉是基于vw / vh分配其他元素尺寸会干扰使元素跨越整个屏幕吗？有没有解决方法？如果重要的话，我的模式的css + html出现在那些文件中的时间要比其他所有元素的css + html出现的时间晚。

最佳答案

在#modal上，高度和宽度使用=而不是：这就是为什么它不能正常工作的原因。将您的#modal CSS更改为：

#modal {
  z-index: 1;
  position: fixed;
  left: 40%;
  right: 30%;
  top: 10%;
  display: none;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
}

如果您的目标是掩盖整个屏幕，则不必在#modal上向左，向右和顶部。这只会导致将模态放置在错误的位置。


不太确定您要在这里实现什么，但是我建议删除/注释掉显示内容：在调试/创建新组件/块时，首先不要这样做

关于html - CSS模式后退不会占用整个屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57470226/