Navbar：layout-align = "space-between stretch"が正しく動作しない

Question

ナビゲーションバーの上にいくつかのリンクを整列しようとしています。そのうちいくつか（Logout、Enter Full Screen）は

ご覧のとおり、動作しません。 これは、ナビゲーションバーのための私のhtmlコードです：

<section layout="row" flex> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" layout-align="space-between stretch" flex> 
     <md-toolbar class="md-theme-indigo" layout="row"> 
      <h1 class="md-toolbar-tools">Menu</h1> 
      <span flex></span> 
      <md-button class="md-icon-button" aria-label="close" ng-click="close()"> 
       <md-icon md-svg-icon="assets/img/closeNavbar.svg"></md-icon> 
      </md-button> 
     </md-toolbar> 
     <div layout="column" layout-align=" center"> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.overview">Overview</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.caseOverview">Cases</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotal">Total Errors</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.totalVehicles">Total Vehicles</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotalDonuts">Error Types</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapCluster">Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapLive">Live Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.manufacturers">Manufacturers</md-button> 
     </div> 

     <div layout="column" layout-align=" center" flex> 
      <md-button ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="login">Logout</md-button> 
      <md-button ng-click="toggleFullscreen()" layout-align=" center" style="text-align:left">{{fullscreenButtonLabel}}</md-button> 
     </div> 

    </md-sidenav> 

</section> 

私はすでにいくつかの「高さ：100％」を追加しようとしたdiv要素にCSSを不必要なスクロールバーが現れていることだけ熟練していること。 この配置を可能にするために何を変更する必要がありますか？

Answer 1

これを試して、希望があなたを助けている。

<section layout="row" flex> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" layout-align="space-between stretch" flex> 
     <md-toolbar class="md-theme-indigo" layout="row"> 
      <h1 class="md-toolbar-tools">Menu</h1> 
      <span flex></span> 
      <md-button class="md-icon-button" aria-label="close" ng-click="close()"> 
       <md-icon md-svg-icon="assets/img/closeNavbar.svg"></md-icon> 
      </md-button> 
     </md-toolbar> 
     <div layout="column" layout-align=" center"> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.overview">Overview</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.caseOverview">Cases</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotal">Total Errors</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.totalVehicles">Total Vehicles</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotalDonuts">Error Types</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapCluster">Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapLive">Live Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.manufacturers">Manufacturers</md-button> 
     </div> 

     <div class="logout" layout="column" layout-align=" center" flex> 
      <md-button ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="login">Logout</md-button> 
      <md-button ng-click="toggleFullscreen()" layout-align=" center" style="text-align:left">{{fullscreenButtonLabel}}</md-button> 
     </div> 

    </md-sidenav> 

</section> 

.md-sidenav-left{ 
position:relative; 
} 

.logout{ 
    position:absolute; 
    bottom:0; 
}