How to set splitter item to take up all remaining space?

[davout]

How do I set up a horizontal smart splitter so that

• it takes all the available sapce (width = 100%, height= 100%)
• the topmost tile takes up whatever vertical space it requires
• the second tile takes up the remaining vertical space

TIA

<smart-splitter orientation="horizontal" theme="blue" size="100%">
  <smart-splitter-item>
    <app-public-home-header></app-public-home-header>
  </smart-splitter-item>
  <smart-splitter-item>
     <router-outlet></router-outlet>
  </smart-splitter-item>
</smart-splitter>

[admin]

Hi davout,
To achieve that you may use this:

html, body {
   width: 100%; height: 100%; padding: 0; margin: 0;
}
app-public-home-header {
   display: block;
   width: 100%;
   height: 200px;
   background: #eee;
}
smart-splitter {
   width: 100%;
   height: 100%;
}

Hope this helps.
Best Regards,
B. Markov

[Author]

Posts