如何設置子組件的高度？

所以我使用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

回答