如何使用Angular Material创建固定sidenav和固定工具栏

Question

我想在http://flatlogic.github.io/angular-material-dashboard/#/dashboard

中创建布局

我尝试使用以下布局，但我无法实现顶部工具栏固定的位置，我们只能滚动内容视图

如何实现上述链接

中提到的布局

Answer 1

您需要使用CSS flexbox。这使您可以相应地安排项目。使用overflow属性来控制滚动条。见这里：

https://www.w3schools.com/css/css3_flexbox.asp

我为你创建了一个样本小提琴：https://jsfiddle.net/q0g6gtn9/

HTML：

<div class="wrap">
  <div class="header">Navigation bar</div>
  <div class="content">  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing..</p>            
  </div>
</div>

CSS：

html,
body,
.wrap {
  height: 100%; 
}

body {
  overflow: hidden;
}

p {
  margin-bottom: 1em;
}

.wrap {
  display: flex;
  flex-direction: column;
}

.header {
  flex: 0 0 auto;
  background-color: red;
  padding: 1em;
}

.content {
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto;
}

Answer 2

这样的东西？

＆＃13;

＆＃13;

angular.module('BlankApp', ['ngMaterial'])
  .controller('ctrl', function ($scope, $timeout, $mdSidenav, $log) {
    $scope.toggleRight = function(){
        $mdSidenav("right").toggle();
    };
  })

＆＃13;

body{
   /* This is only needed because I can't add layout="column" to the BODY tag in this example. */
   display: flex;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" rel="stylesheet"/>
<div ng-app="BlankApp" layout="column" flex>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-messages.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>

<div ng-controller="ctrl" layout="row" flex>
  <md-sidenav md-is-locked-open="true" style="width: 80px;">
    <md-toolbar>
       <a class="md-toolbar-tools"><h1>AMD</h1></a>
     </md-toolbar>
     left side
  </md-sidenav>
  <div layout="column" flex>
    <md-toolbar layout="row" layout-align="end center">
      <md-button class="toolbar-button">Search</md-button>
      <md-button class="toolbar-button" ng-click="toggleRight()">Toggle Right</md-button>
    </md-toolbar>
    <md-content flex layout-padding>
      <div style="height: 2000px">tall content</div>
    </md-content>
  </div>
    <md-sidenav class="md-sidenav-right" md-component-id="right" style="width: 80px;">
    <md-toolbar>
       <a class="md-toolbar-tools"><h1>right</h1></a>
     </md-toolbar>
     right side
  </md-sidenav>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;