split.js jsfiddle layout test

by kakss

HTML

<div id="a" class="split split-horizontal">
  <div id="c" class="split content">fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf
    ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk
    sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh
    ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh
    fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/></div>
  <div id="d" class="split content">fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf
    ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk
    sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh ksdh fksdh fk<br/>fsdf ksdfhksdhfk sdkfh
    ksdh fksdh...

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'], {
      gutterSize: 8,
      cursor: 'col-resize'
    })

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