To create a Splitter that fits to the document’s bounds, you need to set its ‘width’ and ‘height’ properties to ‘100%’ and set also the width and height properties of the web page to ‘100%’. The splitter will automatically adjust its size to fill the document’s bounds and will also we resized when the browser’s window is resized.
Here’s the full source code implementation:
<!DOCTYPE html><html lang="en"><head> <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" /> <meta name="description" content="This page demonstrates splitter's events" /> <title id='Description'>This demonstration shows how to create a splitter that fits the entire browser window's contents. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', max: 1000, min: 250 }, { size: '80%', max: 2000}] }); }); </script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style></head><body> <div style="border: none;" id='splitter'> <div></div> <div></div> </div> </body></html>
