Question

我正在使用Angular2，我想将<app-root>的高度设置为<body>的100％。

目前我有：

<body>
  <app-root></app-root>
</body>

并在CSS文件中设置：

app-root {
  height: 100%;
}

但似乎没有任何改变。

你有什么想法吗？

Answer 1

在组件css中使用：host selector

:host {
    height: 100%
}

Answer 2

只需将config.load_defaults 5.1属性设置为display：

block

所有自定义元素都创建为app-root { display: block; height: 100%; }，因此您无法操纵其尺寸。你需要让它们成为块元素。

Answer 3

过了一段时间，现在我遇到了问题。这是我正在申请的解决方案

app-root {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Answer 4

你可以使用简单的javascript来做到这一点。在页面加载时（或在appComponent中），您可以将app-root的高度设置为等于window.innerHeight。所以它总是占据你窗户的高度。

Answer 5

以您的主要样式执行此操作。css

  html, body {
    min-height: 100vh;
    height: auto;
    margin: 0;
    overflow: auto;
  }

现在

将包括“ app-root”在内的所有元素的高度都设置为100％

Answer 6

按照你的风格。(s)css

app-root {
  min-height: 100vh;
}

Answer 7

另一种方法是将@ackuser 和@LookForAngular 的答案与flex 相结合，这现在是标准。这样，在应用程序的根 styles.scss 中，我们可以有类似的内容：

body {
  min-height: 100vh;
  display: flex;
}

然后，在 app.component.scss 中：

:host {
  display: flex;
  flex-grow: 1;
}