jQuery Splitter

Set the height property of the jqxSplitter. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxSplitter'>
    <div style="background-color: #97FFAF"></div>    
    <div style="background-color: #E8C0AF">
        <div id='vSplitter'>
          <div style="background-color: #88C0AF"></div>
          <div>
            <div style="background-color: #CCC0AF"></div>
            <div class="bPanel" style="background-color: #CDC0AF">
              <input type="button" value="save">
              <input type="button" value="cancel">              
            </div>
          </div>
            
        </div>
    </div>
</div>

CSS

.bPanel{
	  position: fixed;
    bottom: -6px;
    width: 100%;
    background-color: white;
    margin-bottom: 6px;
    padding-top: 9px;
    margin-top: 15px;
    padding-bottom: 6px;
    padding-left: 30px;
    border-top: 3px solid rgba(0,0,0,0.1);  
};

JavaScript

$("#jqxSplitter").jqxSplitter({
   width: '600px',
   height: '600px'
});

$("#vSplitter").jqxSplitter({
   width: '100%',
   height: '100%',
   orientation:'horizontal'
});