Flexbox 和 Angular 材质选项卡答案

【问题标题】：Flexbox and Angular material tabsFlexbox 和 Angular 材质选项卡
【发布时间】：2015-09-06 09:09:23
【问题描述】：

我正在尝试在选项卡主体中使用弹性框，但是将最大主体选项卡的高度设置为 100% 时出现了一些问题

这是我想要实现的目标： http://plnkr.co/edit/r8yCblnMev7ZD4VBcJlQ?p=preview

<div layout="column" layout-fill style="height: 100%;">
  <div flex="33" style="background-color: blue;">
    block1
  </div>
  <div flex="33" style="background-color: yellow;">
    block2
  </div>
  <div flex="33" style="background-color: green;">
    block3
  </div>
</div>

@import '//rawgit.com/angular/bower-material/master/angular-material.css';
md-tab-content {
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
<!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script>
  var app = angular.module('app',['ngMaterial']);
  app.run(function($log) {
    $log.debug('App Run');
  });
  app.factory('appFactory',function() {
    return {};
  });
  app.controller('appCtrl',function($scope,appFactory) {});
</script>
<body ng-app="app" ng-controller="appCtrl" layout="column" style="background-color:rgb(220,220,220);">
  <md-toolbar class="md-accent">
    <div class="md-toolbar-tools">
      Example of max tab height
    </div>
  </md-toolbar>
  <div flex class="md-whiteframe-z1" layout-margin layout="column" style="height: 100%;">
    <div layout="column" layout-fill style="height: 100%;">
      <div flex="33" style="background-color: blue;">
        block1
      </div>
      <div flex="33" style="background-color: yellow;">
        block2
      </div>
      <div flex="33" style="background-color: green;">
        block3
      </div>
    </div>
  </div>
</body>

这是我目前得到的http://plnkr.co/edit/Arcp1nPty2omBp9ZRCfc?p=preview

<md-tabs flex style="margin: 0">
  <md-tab>
      <md-tab-label>
        Tab 1
      </md-tab-label>
      <md-tab-body>
        <div layout="column" layout-fill style="height: 100%;">
          <div flex="33" style="background-color: blue;">
            block1
          </div>
          <div flex="33" style="background-color: yellow;">
            block2
          </div>
          <div flex="33" style="background-color: green;">
            block3
          </div>
        </div>
      </md-tab-body>
  </md-tab>
</md-tabs>

@import '//rawgit.com/angular/bower-material/master/angular-material.css';
md-tab-content {
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
<!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script>
  var app = angular.module('app',['ngMaterial']);
  app.run(function($log) {
    $log.debug('App Run');
  });
  app.factory('appFactory',function() {
    return {};
  });
  app.controller('appCtrl',function($scope,appFactory) { });
</script>
<body ng-app="app" ng-controller="appCtrl" layout="column" style="background-color:rgb(220,220,220);">
  <md-toolbar class="md-accent">
    <div class="md-toolbar-tools">
      Example of max tab height
    </div>
  </md-toolbar>
  <div flex class="md-whiteframe-z1" layout-margin layout="column">
    <md-tabs flex style="margin: 0">
      <md-tab>
        <md-tab-label>
          Tab 1
        </md-tab-label>
        <md-tab-body>
          <div layout="column" layout-fill style="height: 100%;">
            <div flex="33" style="background-color: blue;">
              block1
            </div>
            <div flex="33" style="background-color: yellow;">
              block2
            </div>
            <div flex="33" style="background-color: green;">
              block3
            </div>
          </div>
        </md-tab-body>
      </md-tab>
    </md-tabs>
  </div>
</body>

由于我刚开始使用 angular material（和 flexbox）并且 CSS 不是我的东西，我在这里做错了什么吗？

【问题讨论】：

标签： css flexbox angular-material

【解决方案1】：

您需要在此元素中添加height: 100%：

#tab-content-0 > div {
  height: 100%;
}

@import '//rawgit.com/angular/bower-material/master/angular-material.css';

md-tab-content {
  overflow: auto;
}
#tab-content-0 > div {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
<!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script>
  var app = angular.module('app',['ngMaterial']);
  app.run(function($log) {
    $log.debug('App Run');
  });
  app.factory('appFactory',function() {
    return {};
  });
  app.controller('appCtrl',function($scope,appFactory) { });
</script>
<body ng-app="app" ng-controller="appCtrl" layout="column" style="background-color:rgb(220,220,220);">
  <md-toolbar class="md-accent">
    <div class="md-toolbar-tools">
      Example of max tab height
    </div>
  </md-toolbar>
  <div flex class="md-whiteframe-z1" layout-margin layout="column">
    <md-tabs flex style="margin: 0">
      <md-tab>
        <md-tab-label>
          Tab 1
        </md-tab-label>
        <md-tab-body>
          <div layout="column" layout-fill style="height: 100%;">
            <div flex="33" style="background-color: blue;">
              block1
            </div>
            <div flex="33" style="background-color: yellow;">
              block2
            </div>
            <div flex="33" style="background-color: green;">
              block3
            </div>
          </div>
        </md-tab-body>
      </md-tab>
    </md-tabs>
  </div>
</body>

【讨论】：

非常感谢，这让我快疯了！