防止 Angular Material 中的 flexbox div 折叠

Question

我正在使用 Angular Material 开发一个 AngularJS (v1.5) 应用程序，我被布局的实现困住了。这基本上是 fixed-height header，然后是 variable-height 内容，然后是 fixed-height 页脚。当没有足够的内容来填充 header 之间的 space 时，完整的页面应该滚动（包括 header）并且页脚应该被推到 window 的底部和页脚。

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

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

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

Answer 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。

防止 Angular Material 中的 flexbox div 折叠

Prevent collapse of flexbox div in Angular Material

flexbox

angularjs

angularjs-material