使用JavaScript / AngularJS / CSS设置Div高度等于页面高度

Question

AngularJS 代码:

angular.module("app").config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
        //  cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
        cfpLoadingBarProvider.spinnerTemplate = '<div class="backgroundHide"><div class="centerLoad"><img  src="img/large-spinner.gif" /></div></div>';
    }]);

CSS代码：

.backgroundHide{
background-color:rgb(255, 255, 255);
opacity: 0.8;
z-index: 100000000;
height: 100%;
width: 100%;
top:100px;
position:absolute;

}

- GOPAL SHARMA

---

问题是什么？ - k102

我想知道当我们点击任何按钮时，一个带有处理图像的div会出现在表单上方，但这并没有覆盖整个页面。那么如何使div的高度动态地覆盖整个页面？ - GOPAL SHARMA

Answer 1

.backgroundHide{
background-color:rgb(255, 255, 255);
opacity: 0.8;
z-index: 100000000;
height: 100%;
width: 100%;
top:100px;
position:fixed;

}

- GOPAL SHARMA

---

是的，这样做可能行得通，但不一定是最好的方法，因为position: fixed在这种情况下使用时可能会出现意外问题，特别是在移动设备上。如果您能在问题中提供centerLoad的CSS和旋转图像img以及呈现的HTML，我们很可能能够建议更好的解决方案。 - Asons

Answer 2

 .backgroundHide{
    background-color:rgb(255, 255, 255);
    opacity: 0.8;
    z-index: 100000000;
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;    
}

- Ashkan Mobayen Khiabani

Answer 3

你正在将 backgroundHide 的高度设置为 100%，这意味着它将占用父元素高度的 100%。

如果你想要占用视口高度的 100%，你应该使用 vh。

.backgroundHide{
    background-color:rgb(255, 255, 255);
    opacity: 0.8;
    z-index: 100000000;
    height: 100vh;
    width: 100%;
    top:100px;
    position:absolute;
}

- Weedoze

---

你能给我展示一下结果的截图吗？还有完整的HTML代码？不只是div背景隐藏。 - Weedoze

angular.module("app").config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) { cfpLoadingBarProvider.spinnerTemplate = '<div class="backgroundHide"><div class="centerLoad"><img src="img/large-spinner.gif" /></div></div>'; }]); - GOPAL SHARMA

这不是你的HTML页面。 - Weedoze

实际上，此div仅在单击任何按钮时出现，并在其中显示进度图像。这不是整个页面，只有半个页面。因此，我希望通过此div覆盖整个页面。 - GOPAL SHARMA

这是AngularJS的单页应用程序。只有以上代码负责它。 - GOPAL SHARMA

我需要看到最终的HTML。backgroundHide可能被其他元素阻止或覆盖。 - Weedoze

Answer 4

涵盖视口

.backgroundHide{
    background-color:rgb(255, 255, 255);
    opacity: 0.8;
    z-index: 100000000;
    height:100vh;
    width: 100vw;

    }

- jkojoa

Answer 5

pageHeight会给你视口的高度，现在你可以将该高度分配给实际想要的div。

  var pageHeight = $(window).height();
    $('div').css('hieght',);

- Ganesh Putta