主要内容未对齐的角度材料定位侧导航答案

【问题标题】：angular-material positioning side nav with main content not aligning主要内容未对齐的角度材料定位侧导航
【发布时间】：2016-10-16 01:22:10
【问题描述】：

我正在尝试让侧导航（固定在左侧）和主要内容区域彼此相邻。

我尝试了嵌套 div 和 md-content 的不同组合，以及在行和列布局之间切换/组合。忽略内联 css 和不稳定的 ng 代码 - 这是一个测试 angular-material 的练习。

这是 html 布局。

  <div flex="grow" style="width: 1200px">
    <md-toolbar class="md-hue-2" style="height: 20px">
      <div class="md-toolbar-tools">
        <h2>
          <span>Document List Editing</span>
        </h2>
        <span flex=""></span>
        <md-button class="md-icon-button" aria-label="Profile">
          <md-icon md-svg-icon="imgs/ic_perm_identity_white_18px.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button" aria-label="More">
          <md-icon md-svg-icon="imgs/ic_more_vert_white_18px.svg"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <br />
    <md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="true" md-disable-backdrop="" md-whiteframe="4" style="min-height:500px; max-width: 200px">
      <md-toolbar>
        <h3 class="md-toolbar-tools">Site Sections</h3>
      </md-toolbar>
      <md-list ng-cloak="">
        <md-list-item ng-repeat="page in adminClient.sites[0].pages">
          <a> {{ page.name }} </a>
          <md-divider></md-divider>
        </md-list-item>
      </md-list>
    </md-sidenav>
    <div layout="column" style="max-width: 800px;">
      <md-toolbar class="md-accent" style="height: 30px;">
        <h4 class="header-h4">Documents for site: {{adminClient.sites[0].domain}}</h4>
      </md-toolbar>
      <document-list></document-list>
    </div>
  </div>

这是一个有效的 plnkr：

http://plnkr.co/edit/ppY0gGVgTLKXxYXiW6eV?p=preview

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

给你 - Plunker

相关标记

    <div layout="row">
      <md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="true" md-disable-backdrop="" md-whiteframe="4" style="min-height:500px; max-width: 200px">
        <md-toolbar>
          <h3 class="md-toolbar-tools">Site Sections</h3>
        </md-toolbar>
        <md-list ng-cloak="">
          <md-list-item ng-repeat="page in adminClient.sites[0].pages">
            <a> {{ page.name }} </a>
            <md-divider></md-divider>
          </md-list-item>
        </md-list>
      </md-sidenav>
      <div layout="column" style="max-width: 800px;">
        <md-toolbar class="md-accent" style="height: 30px;">
          <h4 class="header-h4">Documents for site: {{adminClient.sites[0].domain}}</h4>
        </md-toolbar>
        <document-list></document-list>
      </div>
    </div>

如果您对总体布局有任何疑问，请告诉我，我会尽力提供帮助。

【讨论】：