Create a Full-Sized Splitter

The wijsplitter widget allows you to create a full-sized splitter that fills the page. Simply set the fullSplit option to take advantage of this feature. See the Splitter > FullSplit sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/splitter/FullSplit.

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<h2>
    FullSplit</h2>
<div class="main demo" style="height: 300px">
    <!-- Begin demo markup -->
    <div id="splitter">
        <div>
            Panel 1
        </div>
        <div>
            Panel 2
        </div>
    </div>
    <!-- End demo markup -->

After the closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijsplitter widget and set the fullSplit option to true. The <style> markup will set the height and width of the splitter.

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#splitter").wijsplitter({ orientation: "vertical", fullSplit: true });
        });      
    </script>
    <style type="text/css">
        #splitter
        {
            width: 300px;
            height: 300px;
        }
    </style>

Press F5 to run the application and then click the splitter.