本文介绍如何配置RadSplitter控件实现全屏布局，包括设置HTML和BODY标签的高度为100%，移除页面滚动条等技巧，并提供了一个完整的示例代码。
Splitter - Resize with Window
Click here for a full window example.A common scenario in the use of RadSplitter control is when itsWidth and Height properties are set to 100% - you needa complete page layout control from the splitter.
If you have problems to resize the splitter in a full page height here is the followingchecklist:
- make sure the <HTML> tag has its height set to 100% and its margin set to0px
- make sure the <BODY> tag has its height set to 100% and its margin set to0px
- make sure any elements that are embedding the splitter control also has thoseproperties set
<div id="ParentDivElement" style="height: 100%;">
- Optionally in order your page to be standards compliant you can set the DOCTYPE directive to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
- Optionally you can also remove the page scrollbars so the application is as closeto the desktop environment as possible:
<body scroll="no" >
Here is a cross-browser compatible code example of a page that contains a splittercontrol which is filling the entire page size:
Note: To hide the initial resize of the splitter from the end userand to get a better visual result you should set VisibleDuringInit="false"| <%@Page Language="VB" AutoEventWireup="true" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>FullWindow</title> |
| <styletype="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| margin: 0px; |
| padding: 0px; |
| overflow: hidden; |
| } |
| </style> |
| </head> |
| <body> |
| <formid="form2" runat="server"> |
| <asp:ScriptManager ID="ScriptManager" runat="server"/> |
| <div id="ParentDivElement"style="height: 100%;"> |
| <telerik:RadSplitter ID="MainSplitter" runat="server"Height="100%" Width="100%" |
| Orientation="Horizontal" Skin="Outlook"> |
| <telerik:RadPane ID="TopPane"runat="server" Height="100" MinHeight="85" MaxHeight="150" |
| Scrolling="none"> |
| <!--Place the content of the pane here --> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadsplitbarTop" runat="server"CollapseMode="Forward" /> |
| <telerik:RadPane ID="MainPane" runat="server"Scrolling="none" MinWidth="500"> |
| <telerik:RadSplitter ID="NestedSplitter" runat="server"Skin="Outlook" LiveResize="true"> |
| <telerik:RadPane ID="LeftPane" runat="server"Width="200" MinWidth="150" MaxWidth="400"> |
| <!--Place the content of the pane here --> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="VerticalSplitBar" runat="server"CollapseMode="Forward" /> |
| <telerik:RadPane ID="ContentPane" runat="server"> |
| <!--Place the content of the pane here --> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| </form> |
| </body> |
| </html> |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
