Angularjs菜單改變身體的頂部位置？

Question

我嘗試在固定div中添加下拉菜單項。但是當彈出菜單時，我的body元素被設置爲負的「top」屬性。

這裏有codepen個例：http://codepen.io/anon/pen/vLdzQG

觸發時，機身元件空間偏移與「頂」的屬性，似乎是基於對我的「.under」類的margin-top屬性更改：

style="position: fixed; width: 100%; top: -87.2031px; overflow: hidden;" 

有人能告訴我爲什麼以及如何避免這種情況？使用Chrome時，底部會提供一個白色框。

Answer 1

您正在使用角材料，包裝屏幕列布局並根據要求分配flex到div。

Angular Material layout doc

刪除你已經完成了所有的CSS技巧。在CSS只是保持背景顏色和正確標記問題，以便其他人可以幫助

<div layout="column" class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-cloak="" ng-app="MyApp"> 
    <div flex class="top"> 
     <md-menu> 
     <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)"> 
      <md-icon md-menu-origin="" md-svg-icon="call:phone"></md-icon> 
     </md-button> 
     <md-menu-content width="4"> 
      <md-menu-item> 
      <md-button ng-click="ctrl.redial($event)"> 
       <md-icon md-svg-icon="call:dialpad" md-menu-align-target=""></md-icon> 
       Redial 
      </md-button> 
      </md-menu-item> 
      <md-menu-item> 
      <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()"> 
       <md-icon md-svg-icon="call:voicemail"></md-icon> 
       Check voicemail 
      </md-button> 
      </md-menu-item> 
      <md-menu-divider></md-menu-divider> 
      <md-menu-item> 
      <md-button ng-click="ctrl.toggleNotifications()"> 
       <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon> 
       {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications 
      </md-button> 
      </md-menu-item> 
     </md-menu-content> 
     </md-menu> 
    </div> 
    <div flex class="under"> 

    <div><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p></div> 
    </div>