css - 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 类中设置 height:100% 会导致一些不需要的行为。例如，如果我想添加一个页脚(它是静态的，在 ng-view 指令之外)，页脚会显示在第一个 100% 高度之后，而不是出现在页面的末尾，就像我模拟的那样这里:

http://jsfiddle.net/x3zbufhk/

通过模拟 ng-scope 类:

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

那么，有没有办法在不修改 ng-scope 高度的情况下在 angularjs 中拥有 100% 高度的 div？

非常感谢!

编辑:100% 高度 div，我指的是浏览器窗口高度为 100% 的 div。

Answer 1

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

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

或者使用 Bootstrap

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