防止 Angular Material 中的 flexbox div 折叠答案

【问题标题】：Prevent collapse of flexbox div in Angular Material防止 Angular Material 中的 flexbox div 折叠
【发布时间】：2017-02-17 13:15:04
【问题描述】：

我正在使用 Angular Material 开发一个 AngularJS (v1.5) 应用程序，但我一直坚持布局的实现。这基本上是一个固定高度的标题，然后是可变高度的内容，然后是固定高度的页脚。当没有足够的内容来填充页眉和页脚之间的空间时，整个页面应该滚动（包括页眉）并且页脚应该被推到窗口底部。

我已经用到目前为止的代码创建了一支笔（用 div 替换了组件，并引入了 Angular 插入的所有中间 div）但是当我降低窗口的高度时，内容被折叠到一个高度零，而不是保持内容的高度并显示滚动条。

问题可能出在 .main CSS 类上，但我不知道应该放什么。

HTML：

<body ng-app="app">
  <!-- ui-view div -->
  <div layout="column" layout-fill>
    <!-- component div -->
    <div layout-fill>
      <!-- my own div around the page content -->
      <div layout="column" layout-fill>
        <!-- header component div -->
        <div flex="none">
          <header flex="none">
            <md-toolbar>
              <div class="container">
                <div class="md-toolbar-tools" layout="row" layout-align="center center">
                  <div flex></div>
                  <h1>HEADER</h1>
                  <div flex></div>
                </div>
              </div>
            </md-toolbar>
          </header>
        </div>
        <!-- content div -->
        <div flex class="container main">
          <h2>CONTENT</h2>
        </div>
        <!-- footer component div -->
        <div flex="none">
          <footer flex="none">
            <md-toolbar>
              <div class="container">
                <div class="md-toolbar-tools" layout="row" layout-align="center center">
                  <div flex></div>
                  <h1>FOOTER</h1>
                  <div flex></div>
                </div>
              </div>
            </md-toolbar>
          </footer>
        </div>
      </div>
    </div>
  </div>
</body>

CSS：

header, footer {
  md-toolbar {
    height: 100px;
    min-height: 100px;
    background-color: #C8C8C8;

    .md-toolbar-tools {
      height: 100px;
      min-height: 100px;
    }
  }
}

.container {
  width: 600px;
  margin: 0 auto;
}

.main {
  background-color: #E8E8E8;
}

还有 JavaScript：

angular.module("app", ['ngMaterial']);

笔：http://codepen.io/kdbruin/pen/ZLwmvW

【问题讨论】：

好的，刚刚发布了这个并找到了一个解决方案：从“容器主” div 中删除 flex 并将内容包装在另一个 div 中。我已经更新了笔以包含此更改。
另一个编辑：更改 .main CSS 样式以包括 flex: 1 0 0% 和 height: calc(100vh - 200px)，因为这适用于我的测试系统，但不适用于笔。需要做一些进一步的调查。

标签： angularjs flexbox angularjs-material

【解决方案1】：

您可以在容器上使用 flex="grow" 和 min-height 来获得所需的结果。

这是代码

<div layout="column" flex="grow" style='background-color:green'>
<md-toolbar>
  <div flex="10">
    <div class="md-toolbar-tools" layout="row" layout-align="center center">
      <div flex></div>
      <h1>HEADER</h1>
      <div flex></div>
    </div>
  </div>
</md-toolbar>
<div flex="grow" style='background-color:pink; min-height:1000px'>
  <div ng-repeat="no in [0,1,2,3,4,5,6,7,8,9]">
    <h2>CONTENT - {{no}}</h2>
  </div>
</div>
<div flex="10" style='background-color:blue'>
  <div flex></div>
  <h1>FOOTER</h1>
  <div flex></div>
</div>

这是工作的Codepen。

【讨论】：

这就像一个魅力，消除了围绕内容的额外 div 的需要。但是，min-height 需要设置为 calc(100vh - 200px) 以考虑页眉和页脚的高度。
您可以根据需要使用min-height 值。 :)
您可以根据需要使用min-height 值。 :)