Блог

Главная - Вопросы по программированию - Как получить div, который не переполняется, чтобы заполнить всю высоту при прокрутке страницы вниз?

Как получить div, который не переполняется, чтобы заполнить всю высоту при прокрутке страницы вниз?

#html #css

#HTML #css

Вопрос:

У меня есть всплывающее окно на моей веб-странице, и для того, чтобы оно выделялось, у меня есть другой 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 за пределы раздела непосредственно под телом.
Я также попытался установить для тела и / или раздела min-width и min-height значения 100vw и 100vh и установить оба или любой из них в relative, чтобы быть родительским для blurDiv.
Я также пробовал 100% вместо 100vw и 100vh.
Попробовал установить значение right и bottom равным 0, также попробовал без автоматического переполнения.

Похоже, ничего из этого не помогает….

Любая помощь будет оценена

Комментарии:

1. попробуйте position: fixed вместо position: absolute

2. Привет! Фантастика! это сработало! Спасибо, чувак! Сделайте ответ, чтобы я мог вас похвалить!

Ответ №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;
}
Метки: