Question

我有一个叠加层，应该填满整个div。

HTML：

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

CSS：

    .phone {
      position: relative;
      width: 300px;
      height: 500px;
      padding: 15px;
      background: #F2F4F5;
      overflow: hidden;
      cursor: default;
    }

    .overlay {
      display: none;
      background: rgba(27, 35, 41, 0.5);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
    }

我有一些JS向.phone div添加内容，当添加内容时，它会自动滚动到.phone div的底部。但是，叠加层仅伸展以适合300x500的原始尺寸。所以当它向下滚动时，叠加层不再覆盖整个div。

如果我将position: fixed添加到叠加层，它会填满整个屏幕而不是.phone div。

Answer 1

如果你给他定位，他将是：

 top: 0;
  bottom: 0;
  left: 0;
  right: 0;

对于身体而不是你的div，如果你想让他接受他父母的全部尺寸，你就给他了

  height:100%;
  width:100%;

＆＃13;

.phone {
      position: relative;
      width: 300px;
      height: 500px;
      padding: 15px;
      background: red;
      overflow: hidden;
      cursor: default;
    }

    .overlay {
     /* display: none;*/
      background: pink;
      position: absolute;
      /*top: 0;
      bottom: 0;
      left: 0;
      right: 0;*/
      height:100%;
      width:100%;
      z-index: 1;
    }

＆＃13;

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

＆＃13;

Answer 2

将叠加层放在.phone div之外，使其成为body元素的子元素。然后将Body设置为相对位置。

<强> HTML

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

<强> CSS：

body {
    position:relative;
}
.overlay {
      display: none;
      background: rgba(27, 35, 41, 0.5);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
}

.phone {
      width: 300px;
      height: 500px;
      padding: 15px;
      background: #F2F4F5;
      overflow: hidden;
      cursor: default;
    }

叠加div填充整个父div，包括滚动时

2 个答案: