Обложка всей страницы слоем

Question

У меня довольно сложное одностраничное приложение, которое загружается за 20 секунд. Во время обмана я не хотел бы показывать страницу пользователю.

Итак, я создал слой со 100% высотой и 100% шириной, максимальным индексом z и абсолютным положением. Я добавляю этот слой до начала загрузки тела.

$(loaderHTML).appendTo('body'); 


#mainLoader { 
    z-index: 1000; 
    width: 100%; 
    height: 100%; 
    background: rgb(32, 35, 42); 
    position: absolute; 
    top: 40px; 
} 

слой делает работу - она ​​охватывает всю страницу в самом начале, но затем, когда новые элементы создаются на странице и высоту страницы становится все больше, пользователи видят не охвачены в нижней части элементов.

Как создать слой, который покрывает всю страницу, даже если страница изменяет ее высоту?

Answer 1

EDIT: абсолютного положения doent't работу, но фиксированную делает. Не знаю, почему

#mainLoader { 
    z-index:1000 ; 
    width:100 %; 
    height:100 %; 
    background: rgb(32 ,35 ,42); 
    position: fixed; 
    top: 0%; 
    left: 0%; 
    overflow: hidden; 
} 

Answer 2

попробовать этого

#mainLoader { 
    z-index: 9999; 
    background: rgb(32, 35, 42); 
    position: absolute; 
    top: 40px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}