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'>
