Skip to content

Specify an element height to 100% in correct and incorrect ways and observe the results in different browsers.

License

Notifications You must be signed in to change notification settings

DevExpress-Examples/correct-and-incorrect-examples-of-using-height100-in-html

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Relative height (100%) in DevExpress ASP.NET and DevExtreme controls

DevExpress ASP.NET controls do not support the full-screen feature out of the box (except for ASPxSplitter). If you set a control’s height to 100%, it will collapse instead of expanding to the page height. This is due to technological limitations.

To set a relative height for an HTML element, all its parent HTML elements must have the height style initialized. Note that <html>, <body>, and <form> tags are also parent containers and their height should also be initialized (directly or in CSS rules).

html, body, form
{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

This behavior can change depending on the browser. This example illustrates the issue and its solution. You can test it in different browsers and observe the results.

Files to Review

More Examples

About

Specify an element height to 100% in correct and incorrect ways and observe the results in different browsers.

Topics

Resources

License

Stars

Watchers

Forks