如何使用材质使中心行填充页面高度的100％？

Question

我希望使用Angular Material获得标题栏和页脚，其中间的内容部分（占据可用高度的其余部分）。我现在一直在搞乱它并阅读文档，但我觉得我必须遗漏一些材料决定flex在所有情境中的含义。

理想情况下，我希望div#content占据整个垂直高度，让孩子在顶部对齐。

这是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

截图。

Answer 1

您不必使用自定义css类进行这种格式化。看看下面的笔。在身体（中间部分）中，我使用md-button代替您的div元素，但我相信您将能够重新生成它。

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

Answer 2

在这种情况下，我不认为flex属性是合适的。我认为你想要的是将高度设置为100％（或类似，如90％允许你的页眉和页脚）。为了使其工作，所有父项目也必须具有高度设置，包括html和body。

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