Question

我有一个整页叠加div，它出现在点击按钮上并覆盖整个页面。

<div class="overlay">
</div>

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 71px;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(255,255,255, 1);
    overflow-x: hidden;
    transition: 0.5s;
}

我想要做的是从顶部开始覆盖70px，这样我就可以看到/点击/使用菜单。

我已尝试更改top:70px但是它也会影响叠加div的滚动（将底部向下滚动向下移动70px）。

我相信我需要以某种方式定义叠加div的高度。但是，我宁愿不在px中定义某个高度，而是做一些灵活的事情。我尝试使用％来定义它，但它根本不是一个选项 - 因为屏幕尺寸或叠加层的大小可以随时更改。

有没有办法实现这个目标？

Answer 1

您可以使用height: calc(100vh - 70px);来获得所需的结果

Answer 2

不使用高度和宽度，而是使用底部和右侧：

.overlay {
  position: fixed;
  z-index: 1;
  top: 71px;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

<div class="overlay">
</div>

如何从顶部创建除70px之外的整页叠加层？

2 个答案: