The Splitter respects the dimensions you set to its
Height parameters, and distributes the available space according to the
Size of the individual panes.
If you set the
Height in percent, make sure that the parent element provides the desired dimensions and layout first.
The individual panes use CSS flex-basis to set their dimensions and by default they have
flex: 1 1 auto so they distribute the space evenly if there are no other settings.
Size of a pane is set to a larger value than
Max, the pane cannot be resized even if its
Resizable parameter is set to
You must leave at least one
SplitterPanewithout a set
Size. This pane will absorb size changes from other panes when the user resizes them and provides you with some flexibility when defining strict sizes for the other panes so that you don't have to keep track of all the pane sizes, their sum and the container size.
You can find a sample of creating a 100% height layout with a splitter that also offers a header, footer and sidebar in the following sample project: How to make Splitter take 100% height of the viewport.
@*Configure the Splitter size*@ <TelerikSplitter Width="600px" Height="400px"> <SplitterPanes> <SplitterPane Size="200px"> <h4>Left Pane</h4> <div>Collapsible pane with initial size in px.</div> </SplitterPane> <SplitterPane Size="20%"> <h4>Middle Pane</h4> <div>Collapsible pane with initial size in percent.</div> </SplitterPane> <SplitterPane> <h4>Right Pane</h4> <span>No size set, this pane will take the remaining space of the Splitter.</span> </SplitterPane> </SplitterPanes> </TelerikSplitter>