Angularjs菜单改变身体顶部位置？

Question

我尝试在固定 div 中添加下拉菜单项。但是当菜单弹出时，我的 body 元素设置了一个负的“top”属性。

这是一个关于 codepen 的例子：http://codepen.io/anon/pen/vLdzQG

当触发时，body 元素的偏移量会被一个“top”属性改变，该属性似乎基于我的“.under”类 margin-top 属性：

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

谁能告诉我为什么以及如何避免这种情况？对于 Chrome，这会在底部提供一个白框。

Answer 1

您正在使用 angular material，包装屏幕列布局并根据要求将 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>