how can I make a center row fill 100% of the page height with Material?

Question

I'd like to get a title bar and a footer with a content section in the middle (that takes up the rest of the available height) with Angular Material. I've been messing with it for a while now and reading the docs but I feel like I must be missing something with how Material decides what flex means in all the contexts.

Ideally I'd like the div#content to take up the full vertical height, with children aligned at the top.

Here's the 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

And a screenshot.

Answer 1

You don't have to use custom css class for that kind of formating. Check out the following pen. Here in the body(center part) I used md-button instead of your div elements but I'm sure you will be able to repalce it.

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

Answer 2

I don't think the flex property is appropriate in this case. I think what you want is really to set the height to 100% (or similar, like 90% to allow for your header and footer). In order for that to work, all parent items must have a height set as well though, including html and body.

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