How to use the ASPxPageControl control in Full Screen mode (100% browser Width and Height)

This example demonstrates how to resize a DevExpress ASP.NET control (for example, ASPxPageControl) to occupy the entire browser window (a Full Screen mode)

1) Reset the following default CSS rules for a page:

[CSS]
body,html{padding:0;margin:0;}

2) Set the ASPxPageControl.Width property to "100%" and set an initial ASPxPageControl.Height property;

[ASPx]
<dx:ASPxPageControl...Height="100px"Width="100%">

3) Set the ASPxPageControl.Paddings.Padding to "0px" to disable default offsets/paddings (this step is optional);

[ASPx]
<dx:ASPxPageControl...><PaddingsPadding="0px"/></dx:ASPxPageControl>

4) Implement a function that should resize the control within the entire browser window;

5) Call this function when:

- the control is initialized for the first time (handle the client-side ASPxClientControl.Init event);

- the browser window size is changed/resized (subscribe to the "resize" event and handle it via the client-side ASPxClientUtils.AttachEventToElement method):

[ASPx]
<dx:ASPxPageControl...><ClientSideEventsInit="OnInit"/></dx:ASPxPageControl>

[JScript]
function OnInit(s, e){
   AdjustSize();
   ASPxClientUtils.AttachEventToElement(window, "resize", function(evt){
      AdjustSize();});}function AdjustSize(){var height = document.documentElement.clientHeight;
  pc.SetHeight(height);}

See Also:
E1081: How to use the ASPxGridView control (with the enabled vertical scrollbar) in a Full Screen mode (100% browser Width and Height)
Splitter - Fullscreen Mode