Question

I am using the Telerik MVC splitter and I would like this to be displayed at 100% of the height of the container (i.e. have a height of 100%). Currently the panel is being displayed at a fixed height of 600px. I have tried experimenting with the .HtmlAttributes but this has not helped at all. Any ideas? Here is the div containing the splitter

<div>
<% Html.Telerik().Splitter().Name("MainPanelSet")
       .Orientation(SplitterOrientation.Horizontal)
       .Panes(hPanes =>
           {
               hPanes.Add()
                   .Size("25%")
                   .MaxSize("50%")
                   .MinSize("5%")
                   .Scrollable(true)
                   .Resizable(true)
                   .Collapsible(true)
                   .Content(() =>
                   {%> 
                        <p>panel here 1</p>
                    <%});
               hPanes.Add()
                   .Size("50%")
                   .MaxSize("50%")
                   .MinSize("5%")
                   .Scrollable(true)
                   .Resizable(true)
                   .Content(() =>
                   {%> 
                    <p>panel here 2</p>
                    <%});
               hPanes.Add()
                   .Size("25%")
                   .MaxSize("25%")
                   .MinSize("5%")
                   .Scrollable(true)
                   .Resizable(true)
                   .Collapsible(true)
                   .Content(() =>
                   {%> 
                    <p>panel here 3</p>
                    <%});
           }).Render();
        %>

Answer 1

This example is taken from a vertical pane where the width is already set by the .Size

.HtmlAttributes(new { id = "horizontal-middle", style = "height: 84.5%;" })