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

【问题标题】：How to define height for page with angular-split area correctly?如何正确定义具有角度分割区域的页面的高度？
【发布时间】：2019-10-28 01:01:59
【问题描述】：

我有这样的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 内。可滚动高度是应用导航菜单的高度。

我可以通过改变来解决这个问题：

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

这反过来也有缺点：

某些内容可能无法访问
装订线手柄不在垂直中心

由于某种原因，我无法将最大高度类指定给仅包装为拆分的新 div。所以这不起作用：

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

这应该如何正确完成？

【问题讨论】：

你有stackblitz 可以显示吗？
不，但我想我必须用非常简单的外壳制作一个。
我去年在我们的应用程序中遇到了这个确切的问题。我注意到拆分器不会自动考虑该区域上方或下方使用的任何空间，因此它的高度实际上设置为浏览器窗口的内部高度。它只是看起来是正确的，但我们有一些按钮，我们使用了
标签，当它们被取出时，它们会从视图中消失。我发现原因是高度不合适，但直到今天早上才研究如何解决。

标签： html css angular flexbox

【解决方案1】：

你可以试试

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

【讨论】：

请创建一个stackblitz，我会告诉你怎么做。

【解决方案2】：

.as-horizontal .as-split-gutter {
    height: auto !important;
}

【讨论】：

欢迎来到 Stack Overflow！你能花点时间解释一下为什么这应该可以解决手头的问题吗？
解决了我的问题，即使左右面板都有内容，排水沟也不会出现。不知道如何/为什么。将高度设置为左侧或右侧面板对我来说不是一个选项。开发者似乎很自大地拒绝了这方面的问题，尽管有很多。