New to Kendo UI for Angular? Start a free 30-day trial

Setting the Height of the Grid to 100%

Updated on Feb 24, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

How can I set the height of the Grid to 100%, so that it resizes automatically when resizing the browser window (viewport)?

Solution

Set the height of the Grid to 100% by using CSS or by setting the style.height property of the Grid to 100%.

html
  <kendo-grid [style.height.%]="100" ...>...</kendo-grid>
css
  kendo-grid {
    height: 100%;
  }

Set a 100% height to all of the Grid parent elements: <my-app>, <body>, and <html>.

Percentage heights work when the resizable element has a parent with a set height. If the parent has a percentage height as well, then this rule applies recursively until an element with a fixed height is reached, or until the <html> element is reached.

Change Theme

Theme

Loading ...