时间戳

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

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

问题描述

我的网页中有一个弹出窗口，为了让它脱颖而出，我有另一个 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，也尝试过不自动溢出。

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

任何帮助，将不胜感激

标签： htmlcss

解决方案

尝试做：


.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;
}

推荐阅读