如何设置子组件的高度？

所以我使用Angular 2来建立我的个人网站。我在页面顶部有一个标题，其中包含导航按钮，就像其导航栏上的Youtube的主页，趋势和订阅按钮一样。如何设置子组件的高度？

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

这是默认的外观是什么样子：

通知滚动条是如何并排侧与头部。我不喜欢这看起来如何。

这就是我要为：

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

TL; DR：

如何设置一个部件，以百分比或计算值（％somepercent - somenumberpx）的高度;

使用iframe用于这一目的。 – eronax59

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

2016-07-23 04:54:45

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

因此，例如，让我们说，公司在

<router-outlet></router-outlet>

加载组件有一个模板，看起来像这样：

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

将这个样式表：

.body { 
    height: 100vh; 
}

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

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

了解更多有关如何使用VH这里：Make div 100% height of browser window

2016-07-23 05:03:08

回答