将顶部窗格扩展到100％时失去垂直分隔条

Question

当我将顶部窗格扩展到最大高度时，垂直分隔条移至底部，我无法理解。当我在html中跟随它时，我看到顶部高于窗口，但是不确定更改位置，因此当我将顶部窗格扩展到最大高度时，它位于窗口的底部，可以访问它。 / p>

$(document).ready(function() {

  //RunTopBottomGrids();

  RunMySplitters();
  $('#vertical').trigger("resize");
});

$(window).resize(function() {
  $('.sp-wrapper').height($(window).height() - 84);
});

function RunMySplitters() {
  let splitterPosition = "middle";

  $("#vertical")
    .kendoSplitter({
      orientation: "vertical",
      panes: [{
        collapsible: false
      }]
    });

  $("#horizontal")
    .kendoSplitter({
      panes: [{
          collapsible: true,
          size: "10%",
          collapsed: false
        },
        {
          collapsible: true,
          size: "90%"
        }
      ],
      collapse: function(e) {},
      resize: function(e) {

      },
      expand: function(e) {

      }
    });
  let hSplitterBar = $('#horizontal').data("kendoSplitter");
  hSplitterBar.max("#left-pane", "10%");

  $("#innerVertical")
    .kendoSplitter({
      orientation: "vertical",
      panes: [{
          collapsible: true,
          size: '50%'
        },
        {
          collapsible: true,
          size: '50%',
        }
      ],
      collapse: function(e) {

        if (e.pane.id === "top-pane" && splitterPosition === "bottom") {
          splitterPosition = "middle";
        } else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
          splitterPosition = "top";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "top") {
          splitterPosition = "middle";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
          splitterPosition = "bottom";
        }

        AdjustVerticalInnerSplitter(splitterPosition);
      },
      resize: function(e) {},
      expand: function(e) {

        if (e.pane.id === "top-pane" && splitterPosition === "top") {
          splitterPosition = "middle";
        } else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
          splitterPosition = "bottom";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "bottom") {
          splitterPosition = "middle";
        } else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
          splitterPosition = "top";
        }

        AdjustVerticalInnerSplitter(splitterPosition);
      }
    });

  let topBar = $('#innerVertical').data("kendoSplitter");
  topBar.max("#top-pane", "75%");
  topBar.max("#bottom-pane", "75%");
}

function AdjustVerticalInnerSplitter(collapseType) {

  var splitter = $("#innerVertical").data("kendoSplitter");
  var catalogGrid;
  var qeGrid;

  switch (collapseType) {
    case "top":
      splitter.expand("#bottom-pane");
      splitter.size("#bottom-pane", "100%");
      splitter.size("#top-pane", "0%");
      splitterPosition = "top";
      break;

    case "bottom":
      splitter.expand("#top-pane");
      splitter.collapse("#bottom-pane");
      splitterPosition = "bottom";
      $('#right-pane').css('top', '0px');
      break;

    default:
      splitter.expand("#bottom-pane");
      splitter.expand("#top-pane");
      splitter.size("#bottom-pane", "49%");
      splitter.size("#top-pane", "47.5%");

      $('#right-pane').css('top', '0px');

      splitterPosition = "middle";
      break;
  }
}

.sp-wrapper {
  border: 1px solid black;
  margin-top: 30px !important;
}

#horizontal .k-icon.k-collapse-prev.k-i-arrow-60-left {
  display: none;
}

#horizontal .k-icon.k-collapse-next.k-i-arrow-60-right {
  display: none;
}

#horizontal,
#vertical,
#innerVertical {
  height: 100%;
}

.body-content {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#right-pane {
  margin-top: 27px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div class="sp-wrapper">
  <div id="vertical" style="height:100%;">
    <div id="top-pane">
      <div id="horizontal">
        <div id="left-pane" style="border: 1px solid yellow;background-color: yellow;">
          <div class="pane-content"></div>
        </div>
        <div id="right-pane">
          <div id="innerVertical">
            <div id="top-pane" style="width: 100%;border: 1px solid blue;background-color: blue;">
              <div class="pane-content">
                <div id="TopGrid"></div>
              </div>
            </div>
            <div id="bottom-pane" style="width: 100%;border: 1px solid green;background-color: green;">
              <div class="pane-content">
                <div id="BottomGrid"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>