Angular 2 Flex-Layout Höhe 100%

Question

Angular App mit Material Design und Flex-Layout. https://github.com/angular/flex-layout

Ich versuche, ein einfaches Seitenlayout von 2 Spalten oben (links = füllen, rechts = 10%), gefolgt von einer einzelnen Zeile am unteren Rand des Bildschirms. Die Elemente füllen nur noch den vertikalen Platz, der für den Inhalt benötigt wird. Der einzige Weg, den ich gefunden habe, ist, die Höhe manuell auf 100% zu setzen. Muss ich das machen? Was ist falsch an diesem HTML?

<div fxLayout="column"> 
    <div fxLayout="row" fxFlex="90%"> 
    <div fxFlex="80%" class="border"> 
     <p>Stuff is happening here</p> 
    </div> 
    <div fxFlex="20%" class="border"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     </ul> 
    </div> 
    </div> 
    <div fxLayout="row" fxFlex="10%" class="border"> 
    <p>Bottom element</p> 
    </div> 
</div> 

Ergebnis:

Answer 1

Einstellung Höhe auf 100% ist wahrscheinlich die Art und Weise in die Tat zu gehen. Die Höhe ist dynamisch und passt sich somit Ihren Inhalten an. In Ihrem Fall füllt der Inhalt die Seite nicht, so dass dies ein normales Verhalten ist.

Was ist falsch an dieser Lösung?