RadSplitter Height 100%

[Mike]

I have been using the radsplitter and radpanes to manage the layout of a screen in IE9. Everything has been working fine to date with the splitter filling the screen but a couple of my customers have reported problems with the splitter only filling half the page.
I have investigated and it would seem this issue only appears when you run IE7, IE8 or IE9 in compatibility mode.
I essentially have a master page with the following markup:
  

<form id="form1" runat="server">
              <!--Define the page controls-->
          <div style="float:right">
              <telerik:RadSkinManager ID="radSkinManager" runat="server"></telerik:RadSkinManager>
          </div>
          <telerik:RadFormDecorator ID="radFormDecorator" runat="server"/>
          <telerik:RadNotification ID="radNotification" runat="server"></telerik:RadNotification>
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
  <div>
      <div class="pageHeader">HEADER</div>
      <div class="pageBody">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
      </div>
      <div class="pageFooter">FOOTER</div>
  </div>
  </form>

I then have a content page holding the splitter and associated panels as follows:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" >
        <telerik:RadPane ID="RadPane1" runat="server">
            PANEL1
        </telerik:RadPane>

        <telerik:RadSplitBar ID="RadSplitBar1" runat="server">
        </telerik:RadSplitBar>

        <telerik:RadPane ID="RadPane2" runat="server">
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
                <telerik:RadPane ID="RadPane3" runat="server">
                    PANEL1
                </telerik:RadPane>

                <telerik:RadSplitBar ID="RadSplitBar2" runat="server">
                </telerik:RadSplitBar>

                <telerik:RadPane ID="RadPane4" runat="server">
                    PANEL2
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>

The styles used are defined as:

.pageHeader { position:absolute; left:4px; top:4px; right:4px; height:100px; background-color:red }
.pageBody { position:absolute; left:4px; top:108px; right:4px; bottom:108px; background-color:blue }
.pageFooter { position:absolute; left:4px; bottom:4px; right:4px; height:100px; background-color:green }

It would appear the reason for the issue is that the pageBody DIV is held in an absolutely positioned DIV that hasn't had the height set to 100%. Does anybody know how I can resolve this issue?

[Mike]

I should add that the reason I have done things this way is that I need a fixed header, footer and content. This solution works on a variety of different monitor sizes and resolutions.

[Vessy]

Hi Mike,

The reason for this behavior is that the browsers don't always render correctly elements with height in percents and no fixed-sized parents. You could  check this help article for more information: Filling the Entire Page.

In short, in order to configure RadSplitter to fill the entire space of the page (between the footer and header) and to achieve consistent behavior you have to set the height of all of its parent elements (up to a parent with fixed height).

For your convenience I have attached two sample pages replicating the shown layout, so you could choose which approach is more applicable in your case:

• First approach - we use an additional RadSplitter with three RadPanes, containing the header, the content and the footer respectively.
• Second approach - we set the HeghtOffset property of the content, which specifies a number of pixels that are subtracted from the splitter height. In your case this value has to be equal to 208 (header height + footer height + 8px margin between the panes). I would recommend you to see the details here: Specifying Size. Also, an example for similar approach is available in the following KB article: RadSplitter which is 100% of the page and has margin applied

I really hope that will help you.

All the best,
Veselina
the Telerik team