2016-10-25 92 views
0

使用角度1. *和角度材料。角度材料md-content使用它自己的Y滾動條

我遇到問題,插入<div ng-view></div>md-content。如果視圖的高度大於視圖端口。它創建它自己的Y滾動條,所以我有2個Y滾動條相鄰。我可以做的overflow-y: hiddenmd-content。但是,我怎樣才能將它放到視圖水平推動視口的位置,以便只使用外部滾動條?

<body ng-app="app"> 
    <md-toolbar class='md-medium-tall'> 
     <div class="main-title"> 
     <img src="./images/yo-small.png"> 
     <p class="top-title">foo</p> 
     <h5>Bar</h5> 
     </div> 
    </md-toolbar> 

    <div class="menu-container" layout="row"> 
     <md-sidenav 
      md-is-locked-open="$mdMedia('min-width: 900px')" 
      class="md-sidenav-left" 
      md-whiteframe="0"> 

      <md-menu-content> 
      <md-menu-item> 
       <md-button href="#ppv"> 
       <md-icon class="material-icons" menu-align-target="">assessment</md-icon> 
        PPV</md-button> 
      </md-menu-item> 
      </md-menu-content> 

     </md-sidenav> 

     <md-content> 
      <div ng-view></div> 
     </md-content> 
    </div> 
    </body> 

<div style="height: 1000px; width: 800px "> 
    <h1>mom</h1> 
</div> 

enter image description here

更新:我能創造一個黑客來解決這個問題。任何人都可以看到如何使這項工作,因爲它應該?

md-content { 
    overflow-y: hidden; 
} 

angular.module('app') 
    .controller('PPVCtrl', ['$scope', function($scope) { 


    // fix for angular-material responsive issue 
    document.body.style.height = "800px"; 
    $scope.$on('$destroy', function() { 
     document.body.style.height = "100%"; 
    }); 
    }]); 
+0

嘗試使用佈局填充內部md內容 –

回答