Предположим, что CSS для моего диалогового окна "Пожалуйста, подождите"

.loadingProgressDialog {
    width: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    top: 60%;
    left: 40%;
    position: absolute;
    z-index: 9999999999;
    background-color: white;    
}

Когда я показываю его внизу страницы на ноутбуке, DIV не отображается наверху. Позиционирование зависит от того, насколько далеко я прокручен, а не от фиксированных 60%, взятых из текущего размера видимого раздела. Есть ли простой способ получить его на основе текущего размера экрана, не прибегая к взлому JS?

0
gene b. 22 Окт 2019 в 03:46

1 ответ

Лучший ответ

Если ваш .loadingProgressDialog основан на размере экрана, вы можете использовать position: fixed; вместе с единицы просмотра vh и vw

.loadingProgressDialog {
    width: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    top: 60vh;
    left: 40vw;
    position: fixed;
    z-index: 9999999999;
    background-color: white;    
}
1
Nidhin Joseph 22 Окт 2019 в 03:49