split.js jsfiddle responsive layout test

by fxi

HTML

<div id="a" class="split split-horizontal">
       <div id="p" class="split content">p</div>
</div>
<div id="b" class="split split-horizontal">
    <div id="m" class="split content">m</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 {
   display:inline-block;
   -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;
     height:90%;
 }
 
 .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,
        direction:horizontal,
        cursor: 'col-resize'
    })