Angular2 Material2 - sidenav 独立于内容答案

【问题标题】：Angular2 Material2 - sidenav independent from contentAngular2 Material2 - sidenav 独立于内容
【发布时间】：2017-01-21 14:46:05
【问题描述】：

我正在尝试使用 material2 sidenav 组件。我希望它与内容分开。只是一个全高侧边栏，可以在那里和向后滑动 - 没有任何 sidenav 布局，因为它在我的应用布局中创建了一些不需要的东西。

我想要的看起来非常接近https://inbox.google.com/u/0/?pli=1sidenav。我目前拥有的是：

【问题讨论】：

你在说什么不想要的东西？
几个。首先，我不想让我的内容变暗，也不想推动我的应用程序的其余部分。基本上我想要混合“over”和“side”模式的东西。另外，我想为顶部导航留出空间，外出时不覆盖侧导航。
我尝试将顶部导航移出 sidenav-layout 并从布局中删除全屏指令以不覆盖它。这解决了一个问题，但又产生了另一个问题。非全屏 sidenav 布局不是解决方案。我想要的是在不覆盖顶部导航的情况下使侧导航全高。我附上了截图。
而且在“侧边”模式下，如果内容足够宽，它会创建水平滚动，因为它将内容推到右侧。

标签： css angular layout angular2-material

【解决方案1】：

如果要分离侧边栏和主要内容，使用引导列类实现如下，

<md-sidenav-container class="container-fluid">
  <div class="col-md-1">
    <button md-button (click)="sidenav.open()">
      <i class="fa fa-list"></i>
    </button>
  </div>
  <div class="col-md-11">
    Main content goes here
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <md-sidenav #sidenav class="example-sidenav">
   Manu bar
  </md-sidenav>

</md-sidenav-container>

注意：添加break标签是为了增加内容的高度。

LIVE DEMO

【讨论】：