角度材質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雙滾動條

回答

相關問題