angular2 - Set Höhe von Komponenten mit Flexbox

Question

meine „Haupt“ app.component.html nur drei Zeilen Code in dort hat Angenommen:

<app-header-component></app-header-component> 
<app-content-component></app-content-component> 
<app-footer-component></app-footer-component> 

wo ich Header-Komponente wollen etwa 10% des Bildschirms besetzen , für Inhalt zu 70% und für die Fußzeile - 20%, mit dem Flexbox-Layout, und diese Größe sollte nicht ändern, wie viel Inhalt in jeweiligen Komponenten ist. Ich habe versucht, flexbox selbst hinzuzufügen, aber das Verhältnis ändert sich, vor allem für die <app-content-component>. Ich glaube, dass das Problem ist, dass <app-content-component> mehrere verschachtelte Komponenten im Inneren hat und das ist, warum das Verhältnis, das ich brauche, nicht auf die gleiche Weise bleibt.

Answer 1

Die einfachste Art und Weise zu eingerichtet so etwas ist zu verwenden flex-grow/flex-shrink, wo sie n Teil des verfügbaren Speicherplatzes, hier auf volle Ansichtsfenster Höhe gesetzt.

flex-basis ist auf 0 festgelegt, so dass der Inhalt nicht beeinflusst, wie der Speicherplatz zwischen Elementen verteilt wird.

Es wird die 10%/70%/20% Verhältnis für die Elemente, halten aber beide Header/Fußzeile noch in der Höhe einstellen können, wenn sie müssen, die Art ist der Zweck Flexbox verwenden.

Stapel Schnipsel

body { 
 
    margin: 0; 
 
} 
 
my-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
app-header-component { 
 
    flex: 1 1 0;     /* 1 part(s) of 10 */ 
 
    background: lightblue; 
 
} 
 
app-content-component { 
 
    flex: 7 7 0;     /* 7 part(s) of 10 */ 
 
    background: lightgreen; 
 
    overflow: auto; 
 
} 
 
app-footer-component { 
 
    flex: 2 2 0;     /* 2 part(s) of 10 */ 
 
    background: lightblue 
 
}

<my-container> 
 
    <app-header-component> 
 
    Header 
 
    </app-header-component> 
 
    <app-content-component> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    Content with many lines<br> 
 
    </app-content-component> 
 
    <app-footer-component> 
 
    Footer 
 
    </app-footer-component> 
 
</my-container>

---

Note, die in 10 d.h. /* 7 part(s) of 10 */ ist die Summe aus jeder flex-grow/flex-shrink eingestellt.

Answer 2

Was ist Ihr CSS für diese Komponenten? Setzen Sie explizit flex-grow und flex-shrink? Wenn Stenografie flex verwenden, würde ich verwenden:

flex: 0 0 10%; 

auch sicher, dass übergeordneten Container (Körper vielleicht in Ihrem Fall oder App root) auf 100% Höhe zu strecken:

app-root { 
    min-height: 100vh; 
}