title: How to define height for page with angular-split area correctly?
body: <p>I have page with <a href="https://bertrandg.github.io/angular-split/#/" rel="nofollow noreferrer">angular-split</a> like this:</p>
  
  <pre><code>&lt;div class="height-max"&gt;
    &lt;app-nav-menu&gt;&lt;/app-nav-menu&gt;
    &lt;as-split direction="horizontal"&gt;
        &lt;as-split-area&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/as-split-area&gt;
        &lt;as-split-area *ngIf="(contentSplitVisible | async)"&gt;
          &lt;app-content&gt;&lt;/app-content&gt;
        &lt;/as-split-area&gt;
        &lt;as-split-area *ngIf="(propertiesSplitVisible | async)"&gt;
          &lt;app-properties&gt;&lt;/app-properties&gt;
        &lt;/as-split-area&gt;
    &lt;/as-split&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>.height-max 
  {
    height: 100%;
  }
  </code></pre>
  
  <p>to make the split gutters visible (<a href="https://github.com/bertrandg/angular-split/issues/2" rel="nofollow noreferrer">see</a>). Having height 100% for the outmost element has one major drawback:</p>
  
  <p>There is always a scrollbar because app-nav-menu is inside the div. The scrollbable height is height of the app-nav-menu. </p>
  
  <p>I can tacle this by changing:</p>
  
  <pre><code>.height-max 
  {
    height: 100%;
    overflow: hidden;
  }
  </code></pre>
  
  <p>This in turn has drawbacks also: </p>
  
  <ul>
  <li>some content might become unreachable</li>
  <li>gutter handle is not in the center vertically</li>
  </ul>
  
  <p>For some reason I can't specify the height-max class to a new div that wraps only as-split. So this does not work:</p>
  
  <pre><code>&lt;div&gt;
    &lt;app-nav-menu&gt;&lt;/app-nav-menu&gt;
    &lt;div  class="height-max"&gt;
        &lt;as-split direction="horizontal"&gt;
            &lt;as-split-area&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
              ...
  </code></pre>
  
  <p>How this should be done correctly?</p>