如何使中心行填充100％的頁面高度？

Question

我想使用Angular Material獲得一個標題欄和一個頁腳，其中一個內容部分位於中間（占可用高度的其余部分）。 我一直在弄弄它一段時間，閱讀文檔，但我覺得我必須在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%; }