如何设置子组件的高度？

Question

所以我使用Angular 2来构建我的个人网站。我的页面顶部有一个标题，其中包含导航按钮，就像导航栏上的Youtube的Home，Trending和Subscriptions按钮一样。

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

这是默认外观：

注意滚动条与标题并排的方式。我不喜欢那样。

这就是我想要的：

注意滚动条如何位于标题下方。 但是，组件会延伸并且不会停留在页面底部。因此我甚至无法滚动。我可以通过将组件的高度设置为某个像素值来解决这个问题，但如果我使用％，它就不起作用。

TL; DR：

如何将组件的高度设置为百分比或calc（somepercent％ - somenumberpx）;

这个项目的代码在这里： https://github.com/piusnyakoojo/personal-website

Answer 1

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

Answer 2

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

例如，让我们说一下

中加载的组件

apim

有一个如下所示的模板：

<router-outlet></router-outlet>

将其放在样式表中：

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

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

.body {
  height: 100vh;
}

在此处详细了解如何使用vh：Make div 100% height of browser window