angularjs中的100％高度div（ng-scope类问题）

Question

我想在我的首页填充100％高度的图像，填满整个屏幕，然后在滚动时显示其他图像和文字。我按照本指南这样做了：

演示：http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

说明：http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content

问题在于，就我而言，如果你想要一个100％高于浏览器窗口高度的div，你需要为其所有父元素提供100％的高度。因此，为了在angularjs中完成这项工作，我给了html，body和ng-scope 100％的高度（使用min-height：100％不起作用）。

问题是在ng-scope类中高度为100％会导致一些不需要的行为。例如，如果我想添加一个页脚（在ng-view指令之外是静态的），页脚会在第一个100％高度之后显示，而不是出现在页面的末尾，就像我模拟的那样这里：

http://jsfiddle.net/x3zbufhk/

通过以下方式模拟ng-scope类：

#ng-scope {
    height: 100%;
    background-color:red;
}

那么，有没有办法在angularjs中拥有100％高度div而不修改ng-scope的高度？

非常感谢！

编辑：通过100％高度div，我的意思是一个div，它是浏览器窗口的100％高度。

Answer 1

这有点hacky，并没有完全回答你的问题（如何在不修改ng-scope的情况下做到这一点），但确实有效。

html, body, .ng-scope {
  height: 100%;
}

或使用Bootstrap

html, body, .ng-scope, .container-fluid, .row {
  height: 100%;
}

Answer 2

在min-height: 100% FIDDLE

上使用height: 100%代替#ng-scope

Answer 3

以下是我在使用Wijmo FlexGrid和AlgularJS时修复此问题的方法。

我试图在网格的celltemplate中编辑多行textarea。当我进入编辑模式时，wijmo会在我的textarea周围插入一个包含ng-scope类的div。正如您所注意到的那样，整个页面都会更改.ng-scope {height：100％}。如果在浏览器中使用F12 / Developer工具，则可以检查要尝试调整大小的属性周围的元素。就我而言，它看起来像这样：

违规的div是 ng-scope ，其高度为144px。

我在我的site.css中添加了一个基于嵌套类.wj-cell .ng-scope的覆盖

这只会在其父级具有wj-cell类时修改ng-scope。

Answer 4

而不是使用

{
height : 100%
}

尝试此操作

{
height: 100vh;
}