Kendo Splitter拖动分割条向左致高度变化，需保持高度恒定

在Kendo Dialog中嵌套Kendo Splitter的场景下，拖动分割条向左时Splitter高度会缩小，向右拖动时高度恢复，需实现拖动分割条时Splitter高度保持不变。

原问题代码 #

<link href="styles/classic-silver.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script> 
<div id="class_dlg" title="Doc Category" class="class_dlg">
  <div id="class_splitter" class="class_splitter"> 
    <div>split1</div>
    <div>split2</div>
   </div>
</div> 
<style>
.class_splitter{
  flex-grow: 1;   
  height:100%; 
} 
</style>
<script>
this.dlg=$("#class_dlg").kendoDialog({
    modal: true,
    width:800,
    height:600,
    title:'x'
}); 

$("#class_splitter").kendoSplitter( {   panes: [ {  size: "500px"}]}); 
</script>

问题原因 #

Dialog内容区高度计算存在偏差，加上Splitter使用flex-grow:1后，拖动分割条会触发浏览器重排，导致Splitter高度被意外调整。

解决方案 #

通过固定Dialog内容区的可用高度，同时明确Splitter的高度配置，避免自动重计算导致的高度变化：

<link href="styles/classic-silver.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script> 
<div id="class_dlg" title="Doc Category" class="class_dlg">
  <div id="class_splitter" class="class_splitter"> 
    <div>split1</div>
    <div>split2</div>
   </div>
</div> 
<style>
/* 固定Dialog内容区高度，减去标题栏占用空间 */
.class_dlg .k-dialog-content {
  height: calc(100% - 60px);
  padding: 0; /* 移除默认内边距，避免高度计算误差 */
}
.class_splitter{
  height:100%; /* 继承内容区全部高度 */
} 
</style>
<script>
this.dlg=$("#class_dlg").kendoDialog({
    modal: true,
    width:800,
    height:600,
    title:'x'
}); 

$("#class_splitter").kendoSplitter({   
    panes: [ { size: "500px" }],
    height: "100%" /* 明确指定Splitter高度，锁定为父容器高度 */
}); 
</script>

说明 #

1. 给Dialog内容容器.k-dialog-content设置计算后的高度，确保Splitter有明确可用空间，标题栏高度可根据实际主题调整（示例用60px）。
2. 移除Splitter的flex-grow:1，改为直接继承父容器100%高度，避免flex布局带来的不确定重排。
3. 在Splitter初始化时明确指定height: "100%"，强制其使用父容器全部高度，拖动分割条时仅调整面板宽度，不影响整体高度。

内容的提问来源于stack exchange，提问作者actcat wu