Angular Material Layout - 填充页面其余部分的 Div

Question

我已经看过few 示例，但似乎仍然无法弄清楚这个...有没有办法用 div 填充页面的其余部分 使用 Angular 材质而不使用计算？

通过使用“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 和top: 0 、bottom: 0、right: 0 和 left: 0)。

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

（我想我已经更新了你的小提琴，抱歉）这是一个分叉的Fiddle。

Answer 2

在布局方面我很老派，所以我不使用有角度的材料或任何花哨的显示属性来做这些事情，所以我不确定这就是你要找的。

我通常做这些事情是使用绝对位置和设置顶部/底部属性。我在您的小提琴代码中删除了所有与材料相关的标签，并创建了一个解决方案，其中 secondColumn 始终低于 firstColumn。我希望你能从中找到灵感，并将其融入到材料设计中。

我创建了一个 myfill 类，而不是 layout-fill 属性，并使用了以下 css：

.myfill {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 100%;
}

.firstColumn {
  height: 200px;
  width: 100%;
  background-color: green;
  position: absolute;
}

.secondColumn {
  background-color: red;
  bottom: 0;
  top: 200px;
  position: absolute;
  overflow-y: auto;
  width: 100%;
}

https://jsfiddle.net/p3huzaeq/

Answer 3

你可以使用 height: 100vh;而不是高度：calc(100%-64px);