设置覆盖高度等于父div，不等于屏幕高度[重复]

Posted 2023-03-05

【中文标题】设置覆盖高度等于父div，不等于屏幕高度[重复]

【英文标题】：Set overlay height equal to parent div, not equal toscreen height [duplicate]

【发布时间】：2021-01-08 06:25:44

【问题描述】：

我想在鼠标单击事件时突出显示选择 div。 为了实现这一点，我使用了这段代码 sn-p

<div class="parent">
  <div class="overlay"></div>
  <div class="content">
    <div class="subcontent-1">
     ...
    </div>
    <div class="highlight">
    ...
    </div>
  </div>
</div>

为了叠加，我使用了以下css

.overlay
    display:none;
    background: rgba(0, 0, 0, 0.44);
    z-index: 3;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;

但是这个叠加层只填充屏幕高度而不是整个页面高度（父 div 溢出屏幕高度） This is how it looks like now 我想将此叠加层拉伸到页面底部，而不是屏幕高度。

【问题讨论】：

如果您希望您的.overlay 完全适合父级的大小，请在所述父级上使用position: relative，此外在.overlay 上使用position: absolute。

但是当我使用position:relative时，它没有显示覆盖

这就是我的意思codepen.io/SimplyCius/pen/XWdyLqK

哦，好的，谢谢，它也有效

很高兴能为您提供帮助。您可能会接受来自@vodkaJedi 的以下答案。如果不是那么详细，他的意思完全一样。

【参考方案1】：

尝试将position: relative; 添加到您的父 div。

【参考方案2】：

我找到了答案 我认为position:absolute 属性中的bottom:0 是屏幕底部。 当我使用position:fixed 时，它解决了这个问题。 在这种情况下，bottom:0 用作父 div（页面）的底部 覆盖覆盖整个页面。

【讨论】：

如果你有一个更大的高度页面需要滚动.. 我认为fixed 位置不适用于你的情况

页面当前溢出屏幕高度，如图片链接所示。我使用position:fixed，它解决了问题。