Question

我有一个非常复杂的单页应用程序，它加载了20秒。在借用期间，我不想向用户显示页面。

所以，我创建了一个100％高度和100％宽度，最大z-index和绝对位置的图层。我在加载开始到身体之前附加了这个图层。

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


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

图层完成工作 - 它在开始时覆盖整个页面，但是当页面上创建新元素并且页面高度变大时，用户会在底部看到未覆盖的元素。

即使页面改变了它的高度，如何制作覆盖整个页面的图层？

Answer 1

编辑：绝对位置不起作用，但已修复。不知道为什么

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

用图层覆盖整个页面

2 个答案: