100% Height

[Alex Tushinsky]

I've tried a number of examples here from the forum to try and solve my problem of having the rad splitter sit at 100%, but with no luck.

I have a relatively simple web page with a header, content area (where the splitter sits), and a footer.  For some reason, the splitter won't go past about 50% of the screen height.  I've made sure that the elements outside of the splitter are sized to 100%.  In fact, I've added a quick border statement to them to make sure that everything extends to the bottom of the page, and it does (all except the splitter).

I'm attached a screenshot to this thread, and a sample project built with Q2 2009 can be downloaded here.  I've removed the telerik.web.dll references from the bin folder to make the zip file smaller.  

Any help is greatly appreciated!

Thank you,

Alex

[Tsvetie]

Hi Alex Tushinsky,
The following elements do not have height either in percentages or in pixels:

1. <div id="container">
2. <div id="content">

3. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><div >

As a result, the height of these elements depends on the height of their content. However, setting Height=100% for the RadSplitter, means that the splitter should become as high as its parent element - the DIV element from the third point above, which in turn has no height and depends on the height of its content - the splitter.

Please note that this is not something specific to the RadSplitter control - in case you remove the RadSplitter from your page and replace it with a simple DIV element with height=100%, this DIV element will not become 100% of its parent DIV element, but rather as high as its content.

In order to configure your page correctly in this case, you have to set height to the above mentioned elements.

An alternative approach in your case would be the following:

1. Remove the DIV elements from point 2 and point 3 in the above list.
2. Set "height:100%" to the <div id="container">.
3. Set HeightOffset for the RadSplitter to the sum of the heights of the header and footer elements.

I have attached a page that demonstrates the second approach.

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alex Tushinsky]

Yes, I can see the changes you've made.  Excellent.  Thank you.  I'll keep this for future reference.

Regards,

Alex