如何根据页面高度让dropdown的方向自适应

根据需要，下拉框要根据距离底边的高度来决定，下拉框的方向

如图所示

正常显示

image

这是页面的高度不是足够高的时候改变方向显示

image

html代码：
//用来点击显示dropdown的按钮
 <drop-box-anchor  (click)="adjustPositionOfDropDown($event)">
    <i class="fa fa-ellipsis-v more-action-icon" aria-hidden="true"></i>
  </drop-box-anchor>
  
//dropdown content
  <drop-box-content *ngIf="showMoreActionMenu">
    <ul class="list-style-menu">
      <li>
        <a (click)="displayConfirmationWin('Deleted')" class="remove">Remove</a>
      </li>
      <li>
        <a [routerLink]="['edit', itemData.id]" class="edit">Edit</a>
      </li>
      <li>
        <a (click)="duplicateJobBranding(itemData.id)" class="duplicate">Duplicate</a>
      </li>
    </ul>
  <drop-box-content>
  
  ts里关于控制走向的方法封装
   public adjustPositionOfDropDown(event) {
    const documentHeight = document.documentElement.clientHeight; // 获取页面的高度
    const moreActionIconTop = event.target.getBoundingClientRect().y;//获取你点击时候的高度
    const dropDown = this.elRef.nativeElement.querySelector('.drop-panel-wrapper');
    const arrow = this.elRef.nativeElement.querySelector('.arrow');
    //添加的类是用来控制方向的改变
    this.renderer.removeClass(dropDown, 'drop-down-up');
    this.renderer.removeClass(arrow, 'arrow-up');

    if ((documentHeight - moreActionIconTop) < 258) {
    //258是dropdown的高度 添加的类是用来控制方向的改变
      this.renderer.addClass(arrow, 'arrow-up');
      this.renderer.addClass(dropDown, 'drop-down-up');
    }
  }

思路总结

通过页面的高度与点击显示dropdown的按钮的差 与 dropdown 的高度进行比较，如果这个差小于dropdown的高度，说明页面的剩下的地方已经放不下这个dropdown,此时应该将dropdown的方向移动到上方显示。