Question

我已经查看过f e w个例子了，但似乎还无法想出这个例子...有没有办法用div 使用Angular Material填充页面的其余部分而不使用calc ？

我已经能够通过使用＆＃39; calc（）`确定剩余的高度来获得底部div来填充页面的其余部分，但现在第一列的高度是可能会有变化（400px，200px，0px）所以我需要找到一种方法来做到这一点，而不必使用计算。

My page设置基本上是：navbar（固定高度），第一列（高度可以更改），第二列（应该填充页面的其余部分 - 尽管内容长度可能会发生变化，因此应该有滚动条内容仅限于内容（不包括标题）而不是整个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;
}

Woking Code：JSFiddle

Answer 1

你快到了。您只需将body设置为采用所有宽度和高度（并将其设置为position: relative），然后将main容器设置为填充所有空间（使用技巧{ {1}}，position: absolute，top: 0，bottom: 0和right: 0。{/ p>

然后，您的容器以left: 0布局显示其子容器，第二列正在column以占用剩余空间。我添加了flex以在内容过大时启用滚动。

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

Answer 2

在布局方面，我是一所相当老派的学校，所以我不会使用棱角分明的材料或任何花哨的展示属性来做这些事情，所以我不确定这是你的＃＆＃ 39;重新寻找。

我通常做的就是使用绝对位置并设置顶部/底部属性。我在你的小提琴代码中删除了所有与材料相关的标签，并创建了一个解决方案，其中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

你可以使用身高：100vh;而不是高度：calc（100％-64px）;

角度材料布局 - 填充页面的其余部分

3 个答案: