Wie kann ich eine Mittelzeile 100% der Seitenhöhe mit Material füllen?

Question

Ich möchte eine Titelleiste und eine Fußzeile mit einem Inhaltsabschnitt in der Mitte (die den Rest der verfügbaren Höhe einnimmt) mit Angular Material erhalten. Ich habe es jetzt schon eine Weile durchprobiert und die Dokumente gelesen, aber ich habe das Gefühl, dass ich etwas verpassen muss, wie Material entscheidet, was in allen Kontexten bedeutet.

Idealerweise möchte ich die div#content die volle vertikale Höhe einnehmen, mit Kindern an der Spitze ausgerichtet.

Hier ist die HTML (Jade):

div(layout='column', layout-align='center') 

    div(layout='row', layout-align='center center') 
    div(style='background-color:#00A000; height: 40px;', flex='100', layout-padding='10', layout-padding-left='20') 
     div Title 

    div(layout='row', layout-align='center center', flex='grow') 
    div#content(style='background-color:#EEEEEE;', flex='80', layout-fill) 
     div(layout='row', layout-wrap, layout-align='center center', layout-padding='40', flex='grow') 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") Alpha Beta 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") Gamma 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") Delta 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") Epsilon Rho 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") Eta Zeta 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;' layout-padding='5', layout-margin="5") Theta Iota 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") BBBB 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") CCCC 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") DDDD 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") EEEE 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") FFFF 
     div(flex=nogrow, style='background-color:#DDDDDD; width:180px;', layout-padding='5', layout-margin="5") GGGG 

    div(layout='row', layout-align='center center') 
    div(style='background-color:#00A000; height: 40px;', flex='100', layout-padding='10', layout-align="space-around end") Footer 

Und ein Screenshot.

Answer 1

Sie müssen nicht benutzerdefinierte CSS-Klasse für diese Art der Formatierung verwenden. Schaut euch den folgenden Stift an. Hier im Körper (Mittelteil) habe ich md-button statt Ihrer div Elemente verwendet, aber ich bin sicher, dass Sie in der Lage sein werden, es zu repalce.

http://codepen.io/next1/pen/RapLYY

Answer 2

Ich glaube nicht, dass die Flex-Eigenschaft in diesem Fall geeignet ist. Ich denke, was Sie wollen, ist wirklich die Höhe auf 100% (oder ähnlich, wie 90% für Ihre Kopf- und Fußzeile) zu setzen. Damit das funktioniert, müssen alle übergeordneten Elemente eine Höhe haben, einschließlich html und body.

html, body{ height: 100%; } 
#content{ height: 100%; }