Wie lege ich die Höhe einer untergeordneten Komponente fest?

Question

Also verwende ich Angular 2, um meine persönliche Website zu erstellen. Ich habe eine Kopfzeile oben auf der Seite, die Navigationsschaltflächen enthält, genau wie Youtubes Schaltflächen Home, Trend und Abonnements in der Navigationsleiste.

Allerdings mag ich nicht wirklich, wie die Bildlaufleiste an den oberen Rand der Seite erstreckt, wo es Seite an Seite mit der Kopfzeile ist. Ich möchte, dass meine Bildlaufleiste am unteren Rand der Kopfzeile beginnt und sich bis zum Ende der Seite erstreckt. Diese

ist, was das Standardaussehen wie folgt aussieht:

Beachten Sie, wie die Bildlaufleiste ist Seite an Seite mit dem Kopf. Ich mag nicht, wie das aussieht.

Das ist, was ich werde:

Beachten Sie, wie die Bildlaufleiste unterhalb der Kopfzeile ist. Die Komponente erstreckt sich jedoch nicht und endet nicht am Ende der Seite. Als Ergebnis kann ich nicht einmal scrollen. Ich kann das beheben, indem ich die Höhe der Komponente auf einen Pixelwert einstelle, aber es funktioniert nicht, wenn ich% verwende.

TL; DR:

Wie kann ich die Höhe einer Komponente als Prozentsatz oder calc (somepercent% - somenumberpx);

Der Code für dieses Projekt ist hier: https://github.com/piusnyakoojo/personal-website

Answer 1

Sie die Fensterhöhe von Javascript window.innerHeight bekommen kann. Sie müssen auch die Fensterhöhe auf dem window.onresize Ereignis neu berechnen und die Inhaltsdivhöhe neu festlegen.

Answer 2

Um dies zu beheben, änderte ich die Höhe des Körpers der Komponente auf 100vh, um die Höhe 100% der Fensterhöhe zu machen.

So zum Beispiel, lassen Sie uns die Komponente sagen, die in der

<router-outlet></router-outlet> 

geladen wird hat eine Vorlage, die wie folgt aussieht:

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

Dieses im Stylesheet:

.body { 
    height: 100vh; 
} 

Für meine spezielle Situation musste ich dies anpassen, da der Header etwa 50px der Gesamthöhe ist des Fensters. So habe ich:

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

Lesen Sie mehr darüber, wie Sie vh hier verwenden können: Make div 100% height of browser window