使用 JavaScript / AngularJS / CSS 设置 div 高度等于页面高度答案

【问题标题】：Set Div Height equal to Page height using JavaScript / AngularJS / CSS使用 JavaScript / AngularJS / CSS 设置 div 高度等于页面高度
【发布时间】：2016-07-14 21:14:49
【问题描述】：

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;

}

【问题讨论】：

...问题是？...
我想知道当我们点击任何按钮时，表格上方会出现一个处理图像的div，但这并没有覆盖整个页面。那么如何让div的高度动态覆盖整个页面呢？

标签： javascript css angularjs

【解决方案1】：

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

}

【讨论】：

是的，它可能，但不一定是最好的方法，因为position: fixed，当这样使用时，可能会产生意想不到的问题，特别是在手机/平板电脑上。如果您可以在您的问题中提供 centerLoad 的 CSS 和旋转器 img a long 以及呈现的 html，我们很可能会提出更好的解决方案

【解决方案2】：

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

如果你想占据 viewport 高度的 100%，你应该使用vh

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

【讨论】：

你能给我看一下结果的截图吗？和完整的 html ？不仅是 div backgroundHide
angular.module("app").config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) { cfpLoadingBarProvider.spinnerTemplate = '

'; }]);
这不是你的 HTML 页面
实际上，这个 div 仅在单击任何按钮时才会出现，并显示带有它的进度图像。这不是整页，只有半页。所以我想用这个div覆盖整个页面。
这是 AngularJS SPA。只有上面的代码对此负责。

【解决方案3】：

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

【讨论】：

【解决方案4】：

覆盖视口

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

    }

【讨论】：

【解决方案5】：

pageHeight 将为您提供视口的高度，现在您可以将该高度分配给您实际想要的 div。

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

【讨论】：