Navbar: layout-align = "space-between stretch" verhält sich nicht richtig

Question

Ich versuche, einige meiner Links auf der Navbar auszurichten und einige von ihnen (Logout, Vollbild eingeben) an der Unterseite:

Aber wie Sie sehen können, es funktioniert nicht. Dies ist mein HTML-Code für die navbar:

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

ich bereits versucht, einige "height: 100%" hinzufügen CSS divs aber nur erreicht, dass eine unnötige Scrollbar erschien. Was muss ich ändern, um diese Ausrichtung zu ermöglichen?

Answer 1

versuchen Sie das, Hoffnung hilft Ihnen.

<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; 
}