Question

我想创建一个位于我视图顶部的加载元素（它从上到下覆盖）

我的HTML就像

<div class="main">
    <div class="parent">
        <div class="loading">
            loading....
        </div>
    <div>
</div>

我的css

.main{
    height: calc(100vh - 80px - 50px); // I need to have set height for other display reasons
    overflow: auto;
}

.parent {
    height:100%;
}

.loading {
    background-color: red;
    position: absolute;    
    height: 100%;
    width: 100%;
    z-index: 5;
    opacity: 0.1;    
}

我的.main是一个长页面，通常有一个滚动条。

请看我的jsfiddle。 http://jsfiddle.net/u0em2wdn/

当我向下滚动时注意到，我看到没有被红色覆盖的白色区域。

我在这里遇到的问题是我的加载div只覆盖当前。但是，只要我滚动，红色的覆盖范围就消失了。有没有办法，即使滚动，我可以将我的加载div一直扩展到底部？

PS：我知道我可以将.main高度更改为100％但我的页面会有更大的问题。

任何人都可以帮我吗？非常感谢！

Answer 1

将位置：绝对; 更改为位置：固定; 更改为 .loading

.main{
    height: calc(100vh - 80px - 50px); // I need to have set height for other display reasons
    overflow: auto;
}

.parent {
    height:100%;
}

.loading {
    background-color: red;
    position: fixed;    
    height: 100%;
    width: 100%;
    z-index: 5;
    opacity: 0.1; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;   
}

<div class="main">
<div class="parent">
    <div class="loading">
        loading....
    </div>
<div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
 <div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
    <div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>
<div>
    This is a text
</div>

<div>
    This is a text
</div>

</div>

希望这个帮助

如何在我的案例中扩展背景颜色以适合父级？

1 个答案: