1. Add references to the required JavaScript and CSS files:
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
2. Set the page’s width and height to 100%. The CSS below will make the body element to fit to the browser’s window.
<style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style>
3. Create the HTML markup.
In our sample, we have three main DIV tags with absolute position – Header, Content and Footer. The CSS width property is set to 100%. The Header and Footer CSS height property is set to a pixel-based value.
The interesting part is the initialization of the Content. We set its CSS width and height properties to 100%. If we do only that, the element will fit to the window’s bounds. As we want to see our Header and Footer areas, we set its padding-top, padding-bottom and box-sizing CSS properties. By setting the box-sizing property to border box, the element’s height will be calculated by subtracting the top and bottom padding i.e that allows us to have flexible height and width for the Content and fixed height for the Header and Footer areas.
<body> <div style="position: absolute; width: 100%; height: 100px; background: cyan;"> Header </div> <div style="position: absolute; box-sizing:border-box; -moz-box-sizing:border-box; padding-top: 100px; padding-bottom: 50px; width: 100%; height: 100%;"> <div id="mainSplitter"> <div> Left Panel </div> <div> <div id="rightSplitter"> <div> Top-Right Panel </div> <div> Bottom-Right Panel </div> </div> </div> </div> </div> <div style="position: absolute; bottom: 0; background: lightgreen; width: 100%; height: 50px;"> Footer </div></body>
4. The last step is to create a Three-Pane Split layout that fits to the Content area. In order to achieve that, you can use the script below:
<script type="text/javascript"> $(document).ready(function () { $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%' }] }); $('#rightSplitter').jqxSplitter({ height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] }); }); </script>
