角度材质md-toolbar/md-content双滚动条

我在创建两个滚动条时遇到了问题。我为我的导航使用了md-toolbar（我希望始终坚持顶端）和md-content来保存我的内容。当我滚动导航停留在顶部，但创建一个额外的滚动条。（见事先知情同意权在两个滚动条）角度材质md-toolbar/md-content双滚动条

这里是我的index.html：

<body ng-cloak ng-app="TrooNews" ng-controller="AppController as app"> 

     <!--top toolbar--> 
     <md-toolbar class="md-shadow-bottom-z-1"> 
      <div class="md-toolbar-tools"> 
       <md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-md1 aria-label="Menu"> 
        <md-icon>menu</md-icon> 
       </md-button> 
       <a href="/home"><h1>Troo News</h1></a> 
       <span flex></span> 
       <md-button class="md-icon-button" ng-click="" hide-gt-md1 aria-label="Search"> 
        <md-icon>search</md-icon> 
       </md-button> 
      </div> 
     </md-toolbar> 

     <!--left sidenav--> 
     <div layout="row" layout-fill flex> 
      <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> 
       <md-toolbar></md-toolbar> 
       <md-content flex role="navigation"> 
        <md-list> 
         <md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)"> 
          <md-icon>{{item.icon}}</md-icon> 
          <p>{{item.title}}</p> 
         </md-list-item> 
        </md-list> 
       </md-content> 
      </md-sidenav> 
      <div layout="column" layout-fill ng-viewport></div> 
     </div> 

     <div ng-view class="content"></div> 

    </body>

而且我对我的卡查看HTML：

<md-content class="container-fluid"> 
    <section class="content-section"> 
     <div layout="column" layout-align="center" ng-style="{'width': '100%'}"> 
     <div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap> 
      <md-card ng-repeat="article in home.articles"> 
      <img ng-src="{{article.imagePath}}" class="md-card-image" alt="Test image"> 
      <md-card-title> 
       <md-card-title-text> 
       <a href="/article/{{article.id}}"><span class="md-headline">{{article.title}}</span></a> 
       </md-card-title-text> 
      </md-card-title> 
      <md-card-content> 
       <p> 
       {{article.text}} 
       </p> 
      </md-card-content> 
      <md-card-actions layout="row" layout-align="end center"> 
       <md-button class="md-icon-button" aria-label="Report"> 
       <md-icon class="material-icons">report problem</md-icon> 
       </md-button> 
       <md-button class="md-icon-button" aria-label="Share"> 
       <md-icon class="material-icons">share</md-icon> 
       </md-button> 
      </md-card-actions> 
      </md-card> 
     </div> 
     </div> 
    </section> 
</md-content>

而我的CSS：

body { 
    background-color: #EEEEEE; 
} 

md-toolbar { 
    z-index: 100; 
} 

a { 
    text-decoration: none; 
    color: black; 
} 

a:hover { 
    color:#3F51B5; 
} 

md-card { 
    width:400px; 
}

来源

2016-02-19 Jess Anastasio

你可能需要'layout =“column/row”'在那里的身体或类似的东西。也许可以从你的主要内容中删除'layout-fill'。添加一个plunkr/codepen。 – kuhnroyal

工具栏粘贴到md内容不是身体 - >内部滚动条和角度材料的网站一样，他们删除主滚动并使用： body { overflow：hidden; max-width：100％; 最大高度：100％; }并只保留内部。

来源

2016-02-19 17:41:53

你是那个人！ –

角度材质md-toolbar/md-content双滚动条

回答

相关问题