Question

我有一个angular-split的页面，如下所示：

<div class="height-max">
  <app-nav-menu></app-nav-menu>
  <as-split direction="horizontal">
      <as-split-area>
        <router-outlet></router-outlet>
      </as-split-area>
      <as-split-area *ngIf="(contentSplitVisible | async)">
        <app-content></app-content>
      </as-split-area>
      <as-split-area *ngIf="(propertiesSplitVisible | async)">
        <app-properties></app-properties>
      </as-split-area>
  </as-split>
</div>

和CSS：

.height-max 
{
  height: 100%;
}

使可见的切槽（see）。最外层元素的高度为100％有一个主要缺点：

总是有一个滚动条，因为app-nav-menu在div内。可滚动高度是app-nav-menu的高度。

我可以通过以下方式解决这个问题：

.height-max 
{
  height: 100%;
  overflow: hidden;
}

这又有缺点：

某些内容可能无法访问
排水沟手柄不在垂直中心

由于某种原因，我无法将height-max类指定给仅包装按拆分的新div。所以这行不通：

<div>
  <app-nav-menu></app-nav-menu>
  <div  class="height-max">
      <as-split direction="horizontal">
          <as-split-area>
            <router-outlet></router-outlet>
            ...

该如何正确完成？

Answer 1

您可以尝试

.height-max {
height: calc(100vh - 10px);
overflow: auto;
}

如何正确定义具有角度分割区域的页面的高度？

1 个答案: