Как правильно определить высоту страницы с областью углового разделения?

Question

У меня есть страница с угловым разделением , например:

<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%;
}

, чтобы сделать разделенные желоба видимыми (см ).Наличие высоты 100% для самого внешнего элемента имеет один существенный недостаток:

Всегда есть полоса прокрутки, потому что app-nav-menu находится внутри div.Высота прокрутки - это высота app-nav-menu.

Я могу изменить это, изменив:

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

Это, в свою очередь, также имеет недостатки:

• некоторое содержимое может стать недоступным
• желобhandle не находится по центру по вертикали

По какой-то причине я не могу указать класс height-max для нового div, который переносит только as-split.Так что это не работает:

<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;
}