Best practice for having programmatically created UpdatePanel expand to fill parent container?

In doing some reworking of my web application I encountered the following issue:

Although an ASP UpdatePanel does not have a height property it does not automatically expand to fill its parents container. Instead, it grows with its children's dimensions. In my scenario, the child does not have dimensions -- it should expand to fill its parents container. This causes both the UpdatePanel and its child to have very small heights.

Before I had:

[Parent Container] -> [Child Container] with both ParentContainer and ChildContainer's height property unset so that they will fill containers higher up in the hierarchy.

Now I have:

[Parent Container] -> [Update Panel] -> [Child Container]. Parent Container's dimensions are not guaranteed to be non-empty, so I am unable to programatically set ChildContainer's dimensions in all cases. As such, I would like my UpdatePanel to work in the same fashion as the controls it is wrapped around.

Is my best bet to go into the CSS and do something like:

.UpdatePanel
{
    height: 100%;
}

or do I have other, cleaner options available to me? I am creating these controls server-side, so I don't have the opportunity to wrap them in divs (nor do I want to).

EDIT:

I (can't?) use Panel instead of UpdatePanel because I would like to use the functionality of being able to update conditionally. I have a timer on my page which calls UpdatePanel.Update() on controls -- this functionality does not exist 开发者_如何学Pythonin panel AFAIK.

The body of my page is height: 100% and here is the static structure hierarchy.

The location where RadPane2 is declared is where an UpdatePanel will be slipped in. It needs to be between the RadPane and the CormantRadDockZone controls. This is only the 'base' implementation, however. Users have the ability to stack more RadPane/UpdatePanel/CormantRadDockZone 1:1:1 contents onto the page. As such, I have UpdatePanels being generated dynamically -- which means I can't apply the CSS to just an UpdatePanel's ID.

<telerik:RadSplitter ID="RadSplitter2" runat="server" BorderSize="0" Height="100%" HeightOffset="155" Skin="Web20" Width="100%" PanesBorderSize="0">
    <telerik:RadPane ID="RadPane_DefaultExpand" runat="server" CssClass="allRoundedCorners" Scrolling="None">
        <telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="RadPageView1" runat="server">
                <telerik:RadSplitter ID="RadSplitter1" Runat="server" BorderSize="0" Height="100%" Skin="Web20" Width="100%">
                    <telerik:RadPane ID="RadPane1" Runat="server" CssClass="leftRoundedCorners" Scrolling="None" Width="20px">
                        <telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True" Width="20px">
                            <telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/configuration.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Configuration" Width="160px" EnableDock="False">
                                <telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" ondropped="LstBxSettings_Dropped" Skin="Web20" Width="100%" onclientdropped="OnClientDropped">
                                    <Items>
                                        <telerik:RadListBoxItem Text="Horizontal Bar" Value="Horizontal"/>
                                        <telerik:RadListBoxItem Text="Vertical Bar" Value="Vertical" />
                                    </Items>
                                </telerik:RadListBox>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" IconUrl="~/Content/Dashboard/Icons/chart.png" TabView="ImageOnly" BackColor="#ECF4FD" MinWidth="160" Scrolling="Y" Title="Custom Widgets" Width="160px" EnableDock="False">
                                <telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/historical.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Historical Widgets" Width="160px" EnableDock="False">
                                <telerik:RadListBox ID="lstBxHistorical" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane4" Runat="server" IconUrl="~/Content/Dashboard/Icons/settings_global.png" onclientbeforeexpand="ShowDashboardGlobalSettings" TabView="ImageOnly" EnableDock="False" />
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners" Scrolling="None" onclientresized="OnClientResized">
                        <cc1:CormantRadDockZone ID="RadDockZone1" runat="server" /> 
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </telerik:RadPane>
</telerik:RadSplitter>

---

UpdatePanel will translate to a div or span on client side so as long as you set the css class properly, this should work. Going via CSS is the cleanest approach.

Here's how you can set the css class (if you want to use this in a css file, make sure you've PerformSubstitution set to true):

#<%=UpdatePanel1.ClientID%> {
    height: 100;    
}

Also, based on browser type, you may have to reset margin and padding to 0.

Make sure that the UpdatePanel's parent has height set too.

Update: use a Panel to wrap UpdatePanel (not substitute it)

<asp:Panel ID="Panel1" runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</asp:Panel>

Noticed RadPane has a CssClass property so you can just add it there.

<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners myCssClass" Scrolling="None" onclientresized="OnClientResized">
    <cc1:CormantRadDockZone ID="RadDockZone1" runat="server" /> 
</telerik:RadPane>