当页面向下滚动时，如何获得一个不溢出的div来填充整个高度？答案

【问题标题】：How to get a div that does not overflow to fill the entire height when the page scrolls down?当页面向下滚动时，如何获得一个不溢出的div来填充整个高度？
【发布时间】：2021-04-29 11:39:45
【问题描述】：

我的网页中有一个弹出窗口，为了让它脱颖而出，我还有另一个 div (blurDiv)，它基本上是白色背景，弹出窗口和网页之间的不透明度为 80%。

我遇到的问题是网页比视口长，并且 blurDiv 会填充视口，但它不会覆盖当您滚动时网页下方的部分，或者即使您不滚动但开始向下滚动位 blurDiv 从顶部开始，因此它不会一直覆盖到底部。

HTML 基本上是

.blur {
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    z-index: 2;
    min-height: 100vh;
    min-width: 100vw;
    background-color: rgba(255,255,255, 0.8);
}

<body>
  <section class='section' >
    <h1 class='header'>Header</h1>
    
    <table class='table'>....</table>
    
    <div class="popup-div hide">........</div>
    
    <div class="blur hide" id="blur"></div>
    
  </section>
</body>

我尝试将 div 放在正文下方的部分之外。我还尝试将 body 和/或部分 min-width 和 min-height 设置为 100vw 和 100vh，并将两者或两者都设置为相对于 blurDiv 的父级。我也尝试过 100% 而不是 100vw 和 100vh。尝试将右下角设置为0，也尝试过不自动溢出。

这些似乎都没有帮助....

任何帮助将不胜感激

【问题讨论】：

试试position: fixed而不是position: absolute
嘿！极好的！那行得通！谢啦！做一个答案，这样我就可以相信你！

标签： html css

【解决方案1】：

尝试做：


.blur {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    z-index: 2;
    min-height: 100%;
    min-width: 100vw;
    background-color: rgba(255,255,255, 0.8);
}
.popup_div{
    position: absolute;
    top:10px;

}

隐藏弹出窗口

.hide{
    display: none;
}

【讨论】：