angularjs 中的 100% 高度 div（ng-scope 类问题）答案

【问题标题】：100% height div in angularjs (ng-scope class issue)angularjs 中的 100% 高度 div（ng-scope 类问题）
【发布时间】：2018-06-18 04:16:49
【问题描述】：

我想在我的首页放置一个 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;
}

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

非常感谢！

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

【问题讨论】：

100% 高度 = 100% 文档高度？
是的，很抱歉，因为可能不清楚。我想要一个 100% 浏览器高度的 div。谢谢！
minimit 网站没有为我加载。你在寻找类似this 的东西吗？附带说明，使用 #ng-scope 是 ID ng-scope 而不是类。
您好，非常感谢您的回答。我希望 .ng-scope 类中长内容的这种行为：jsfiddle.net/getg811q 和短内容的这种行为：jsfiddle.net/hcpr96ar。但我不知道如何做到这一点，因为对于短内容，您需要 html、body 和 ng-scope 的高度：100%，而对于长内容，页脚错误地放置在该配置中：jsfiddle.net/x3zbufhk
你有没有设法解决这个问题？我面临着完全相同的问题

标签： css angularjs height

【解决方案1】：

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

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

或者使用 Bootstrap

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

【讨论】：

【解决方案2】：

只需在#ng-scope 上使用min-height: 100% 而不是height: 100% FIDDLE

【讨论】：

嘿，非常感谢。由于某种原因，在 .ng-scope 中使用 min-height 无法使图像成为窗口的 100% 大小（按照我链接的教程），但你是完全正确的，它适用于我用来模拟的文本小提琴中的问题。让我试着找出原因......

【解决方案3】：

这是我在使用 Wijmo FlexGrid 和 AlgularJS 时解决此问题的方法。

我正在尝试在网格的单元格模板中编辑多行文本区域。当我进入编辑模式时，wijmo 会在我的 textarea 周围插入一个带有 ng-scope 类的 div。正如您注意到更改 .ng-scope { height: 100% } 与您的整个页面一样。如果您在浏览器中使用 F12 / Developer 工具，您可以检查您尝试调整大小的属性周围的元素。就我而言，它看起来像这样：

有问题的 div 是 ng-scope，其高度为 144 像素。

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

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

【讨论】：

【解决方案4】：

而不是使用

{
height : 100%
}

试试这个

{
height: 100vh;
}

【讨论】：