Css 如何使用角度材质创建固定侧导航和固定工具栏

我想把板条箱的布局如图所示

我尝试了以下布局，但我无法实现它，在顶部的工具栏是固定的，我们将得到滚动只为内容视图

---

如何实现上述链接中提到的布局

您需要使用CSS flexbox。这使您能够相应地安排项目。使用overflow属性控制滚动条。请看这里：

我为您创建了一个小提琴样本：

HTML:

像这样的

angular.module（'BlankApp'，['ngMaterial']））
.controller（'ctrl'，函数（$scope、$timeout、$mdSidenav、$log）{
$scope.toggleRight=函数（）{
$mdSidenav（“右”）.toggle（）；
};
})

正文{
/*这只是因为在本例中，我无法将layout=“column”添加到BODY标记中才需要*/
显示器：flex；
}

AMD
左侧
搜寻
向右切换
高含量
正确的
右侧

我正在尝试使用有角度的材质设计来实现它。有没有办法通过使用角材料库来实现这一点？为什么会有这种偏好？

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

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