split.js實驗

結論：在專案內無法正確執行

by cactus77kiki

HTML

<div class="htmlcontent">
  <div id="a" class="split content">
  </div>
  <div id="c" class="split content">
  </div>  
</div>

CSS

</style> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>
<style> 
 /*html,
 body {
     height: 100%;
 }
 
 body {
     padding: 8px;
     background-color: #F6F6F6;
     box-sizing: border-box;
 }*/
 html,body{
     height: 100%;
 }
 .htmlcontent{
     height: 100%;
     /*padding: 8px;*/
     background-color: #F6F6F6;
     box-sizing: border-box;
 }
 
 .split {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 .content {
     /*border: 1px solid #C0C0C0;
     box-shadow: inset 0 1px 2px #e4e4e4;*/
     background-color: #fff;
 }
 
 .gutter {
     /*background-color: transparent;*/
     background-repeat: no-repeat;
     background-position: 50%;
     background-color:#B5B5B5;
 }
 
 .gutter.gutter-horizontal {
     cursor: col-resize;
     /*background-image: url('../grips/vertical.png');*/
 }
 
 .gutter.gutter-vertical {
     cursor: row-resize;
     /*background-image: url('../grips/horizontal.png');*/
 }
 
 .split.split-horizontal,
 .gutter.gutter-horizontal {
     height: 100%;
     float: left;
 }

JavaScript

Split(['#a', '#c'], {
        gutterSize: 3,
        cursor: 'pointer',
        direction: 'vertical',
        minSize: [20, 20],
    });