如何让中心行用 Material 填充 100% 的页面高度？

Question

我想要一个标题栏和一个页脚，中间有一个内容部分（占据剩余的可用高度）Angular Material。我已经弄乱了一段时间并阅读了文档，但我觉得我一定遗漏了一些关于 Material 如何决定 flex 在所有上下文中的含义的东西。

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

这是 HTML（翡翠）：

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

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

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

Answer 2

您不必为这种格式使用自定义 css class。看看下面的笔。在正文（中心部分）中，我使用了 md-button 而不是您的 div 元素，但我相信您将能够重新填充它。

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

如何让中心行用 Material 填充 100% 的页面高度？

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

html

css

angularjs

angular-material