Question

我尝试在固定的div中添加一个下拉菜单项。但是当菜单弹出时，我的身体元素设置为负面＆＃34;顶部＆＃34;属性。

以下是codepen的例子：http://codepen.io/anon/pen/vLdzQG

触发后，使用＆＃34; top＆＃34;更改主体元素偏移量。似乎是基于我的＆＃34; .under＆＃34; class margin-top property：

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>

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

1 个答案: