Flexbox和Angular材质选项卡

时间：2015-06-20 12:42:48

标签： css flexbox angular-material

我正在尝试在标签体内使用弹性框，但在将最大标签标签的高度设置为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>

因为我刚刚开始使用角度材料（和flexbox）而且CSS不是我的东西，这里有什么我做错了吗？

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题