Fab-toolbar看起來不正確

Question

在主演示here提供的示例中，Fab-toolbar看起來不錯。

但是，如果您嘗試在自己的例子中使用它，它會變得比它應該更高，可以看到here。

<div ng-controller="AppCtrl" class="fabToolbardemoBasicUsage" ng-app="MyApp"> 
    <md-content class="md-padding"> 
    <p> 
     You can use the fabToolbar with a trigger and regular toolbar. 
    </p> 

    <p> 
     You may use the <code>md-open</code> attribute to programmatically 
     control whether or not the control is open, and you may add a class 
     of <code>md-left</code> or <code>md-right</code> to control the 
     position of the trigger and toolbar tools. 
    </p> 
    </md-content> 

    <md-fab-toolbar md-open="demo.isOpen" count="demo.count" ng-class="demo.selectedAlignment"> 
    <md-fab-trigger class="align-with-text"> 
     <md-button aria-label="menu" class="md-fab md-primary"> 
     <md-icon md-svg-src="img/icons/menu.svg"></md-icon> 
     </md-button> 
    </md-fab-trigger> 

    <md-toolbar> 
     <md-fab-actions class="md-toolbar-tools"> 
     <md-button aria-label="comment" class="md-icon-button"> 
      <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon> 
     </md-button> 
     <md-button aria-label="label" class="md-icon-button"> 
      <md-icon md-svg-src="img/icons/ic_label_24px.svg"></md-icon> 
     </md-button> 
     <md-button aria-label="photo" class="md-icon-button"> 
      <md-icon md-svg-src="img/icons/ic_photo_24px.svg"></md-icon> 
     </md-button> 
     </md-fab-actions> 
    </md-toolbar> 
    </md-fab-toolbar> 

    <md-content class="md-padding" layout="column"> 
    <div layout="row" layout-align="space-around"> 
     <div layout="column"> 
     <b>Open/Closed</b> 

     <md-radio-group ng-model="demo.isOpen"> 
      <md-radio-button ng-value="true">Open</md-radio-button> 
      <md-radio-button ng-value="false">Closed</md-radio-button> 
     </md-radio-group> 
     </div> 

     <div layout="column"> 
     <b>Alignment</b> 

     <md-radio-group ng-model="demo.selectedAlignment"> 
      <md-radio-button ng-value="'md-left'">Left</md-radio-button> 
      <md-radio-button ng-value="'md-right'">Right</md-radio-button> 
     </md-radio-group> 
     </div> 
    </div> 
    </md-content> 
</div> 


.fabToolbardemoBasicUsage md-fab-toolbar.md-left md-fab-trigger.align-with-text { 
    left: 7px; } 


(function() { 
    'use strict'; 

    angular.module('MyApp') 
    .controller('AppCtrl', function($scope) { 
     $scope.isOpen = false; 

     $scope.demo = { 
     isOpen: false, 
     count: 0, 
     selectedAlignment: 'md-left' 
     }; 
    }); 
})(); 

我該如何解決這個問題，並使工具欄有一個正常的高度？

Answer 1

您可以更改默認的硬編碼height:6.8 rem值height:100%這樣的： -

md-fab-toolbar .md-fab-toolbar-wrapper { 
    height: 100%; 
}