split.js jsfiddle layout test

by no2don

HTML

<div id="a" class="split split-horizontal">
    <div id="c" class="split content">c</div>
    <div id="d" class="split content">d</div>
</div>
<div id="b" class="split split-horizontal">
    <div id="e" class="split content">e</div>
    <div id="f" class="split content">f</div>
</div>

CSS

</style> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.2.0/split.min.js"></script>
<style> 
 html,
 body {
     height: 100%;
 }
 
 body {
     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%;
 }
 
 .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', '#b'], {
        gutterSize: 8,
        cursor: 'col-resize'
    })

    Split(['#c', '#d'], {
        direction: 'vertical',
        sizes: [25, 75],
        gutterSize: 8,
        cursor: 'row-resize'
    })

    Split(['#e', '#f'], {
        direction: 'vertical',
        sizes: [25, 75],
        gutterSize: 8,
        cursor: 'row-resize'
    })