css - 如何设置子组件的高度？

Question

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

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

这是默认外观的样子:

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

这就是我要做的:

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

长话短说:

如何将组件的高度设置为百分比或 calc(somepercent% - somenumberpx);

这个元素的代码在这里: https://github.com/piusnyakoojo/personal-website

Answer 1

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