如何设置子组件的高度？答案

【问题标题】：How do I set the height of a child component?如何设置子组件的高度？
【发布时间】：2016-11-27 01:01:39
【问题描述】：

所以我正在使用 Angular 2 来构建我的个人网站。我在页面顶部有一个标题，其中包含导航按钮，就像 Youtube 导航栏上的主页、趋势和订阅按钮一样。

但是，我不太喜欢滚动条如何延伸到与页眉并排的页面顶部。我希望我的滚动条从页眉底部开始并延伸到页面底部。

这是默认外观的样子：

注意滚动条是如何与标题并排的。我不喜欢它的样子。

这就是我想要的：

注意滚动条位于标题下方。 但是，组件会扩展并且不会在页面底部停止。 结果我什至无法滚动。我可以通过将组件的高度设置为某个像素值来解决此问题，但如果我使用 %.

TL;DR:

如何将组件的高度设置为百分比或计算（somepercent% - somenumberpx）；

【问题讨论】：

【解决方案1】：

您可以通过javascriptwindow.innerHeight获取窗口高度。您还必须在window.onresize 事件上重新计算窗口高度，并重新设置内容 div 高度。

【讨论】：

【解决方案2】：

为了解决这个问题，我将组件主体的高度更改为 100vh，以使高度为窗口高度的 100%。

例如，假设加载的组件

<router-outlet></router-outlet>

有一个看起来像这样的模板：

<div class="body">
  //.. some content
</div>

把它放在样式表中：

.body {
  height: 100vh;
}

对于我的特殊情况，我不得不调整它，因为标题大约是窗口总高度的 50 像素。所以我有：

.body {
  height: calc(100vh - 50px);
}

在此处阅读有关如何使用 vh 的更多信息：Make div 100% height of browser window

【讨论】：