Default top and bottom pane height will share the total height of page and the divider will be placed accordingly.
Class has-two-pane should be added to
.container page shell-left-navigation if two pane is used with left shell navigation
Like this <div class="container page shell-left-navigation has-two-pane">
Example Code
<div class="container page shell-left-navigation has-two-pane">
<div class="navigation-pane-left">
<div class="navigation-content-wrapper">
<div class="navigation-header">
.
.
.
</div>
<div class="navigation-content">
.
.
.
</div>
</div>
</div>
<div class="divider divider-navigation">
<span class="handle"></span>
</div>
<div class="navigation-pane-right">
<div class="two-pane-horizontal">
<div class="pane-top">
<div class="pane-wrapper">
<div class="pane">
<h3 class="title">Two pane - Horizontal</h3>
<section>
<!--Top Pane content goes here-->
</section>
</div>
</div>
</div>
<div class="divider twopane-divider-horizontal"></div>
<div class="pane-bottom">
<div class="pane-wrapper">
<div class="pane">
<!--This is optional. Include only if dark background is required-->
<div class="pane-header-bg">
<h3 class="title">Bottom Panel: Horizontal</h3>
</div>
<div class="bottom-content-panel">
<!--Bottom Pane content goes here-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>