javascript - Angular Material 布局 - 填充页面其余部分的 Div

Question

我已经看过 f e w示例，但似乎仍然无法弄清楚这一点...是否有办法用 div 填充页面的其余部分使用 Angular Material 而无需使用 calc？

通过使用“calc()”确定剩余高度，我已经能够让底部的 div 很好地填充页面的其余部分，但现在第一列的高度可能会发生变化(400px、200px、0px ) 所以我需要找到一种无需使用 calc 即可完成此操作的方法。

My page设置基本上是:导航栏(固定高度)，第一列(高度可能会发生变化)，第二列(应该填满页面的其余部分 - 虽然内容长度可能会发生变化所以应该只在内容上有内容滚动条(不包括标题)而不是整个 div)。

HTML:

  <div layout="column" layout-fill>
     <md-toolbar>
       toolbar
     </md-toolbar>

     <div class="main">
        <div style="height:100%" layout-fill>
          <div flex layout="column" class="firstColumn">
            <div class="header1">
              first column header 1
            </div>
            <div class="header2">
              first column header 2
            </div>
            <div>
            first column content
            </div>
          </div>
          <div flex layout="column" class="secondColumn">
            <div class="header3">
             second column header 1
            </div>
            <div class="header4">
              second column header 2
            </div>
            <div>
            second column content:
            could be really really long, or really really short...
            needs a scrollbar if long, and for the background to still fill the page if not long.
            </div>

          </div>
        </div>
     </div>
  </div>

CSS:

.main {
  height: calc(100%-64px);
}

.md-toolbar {
  background-color: black;
  height: 64px;
}

.firstColumn {
  height: 200px;
  background-color:green;
}

.secondColumn {
  background-color:red;
}

.header1, .header3 {
  height: 64px;
}

.header2, .header4 {
  height: 28px;
}

工作代码:JSFiddle

Answer 1

你快到了。您只需将 body 设置为获取所有宽度和高度(并将其设置为 position: relative)，然后设置您的 main 容器填充所有空间(使用技巧 position: absolute with top: 0, bottom: 0, right: 0 和 left: 0)。

然后，您的容器在 column 布局中显示其子项，第二列被 flex 占用剩余空间。我添加了一个 overflow: auto 以在内容太大时启用滚动。

(我想我已经更新了你的 fiddle ，抱歉)这是一个 fork 的 Fiddle .