---
title: Height
position: 1
seo_title: Telerik and Kendo UI Height Utilities
seo_description: Use the Telerik and Kendo UI Height utilities to configure the
  height of an element.
---
## Height

The Telerik and Kendo UI Height Utilities are CSS utility classes that enable you to control the height of an element.

<CSSRulesList data='{"id":"height"}'></CSSRulesList>

### Fixed

Use the `k-h-{value}` utility to set a fixed height to an element.

<LiveDemo data='{"links":[],"demo":"utils/sizing/height/fixed","height":200,"codePreviewSettings":{"filterSelector":".k-bg-primary","ignoreClassNames":"k-w-full k-border-solid k-border-black k-text-white k-text-center"}}'></LiveDemo>

### Full

Use the `k-h-full` utility to make the element expand to 100% of its parent's height.

<LiveDemo data='{"links":[],"demo":"utils/sizing/height/full","codePreviewSettings":{"ignoreClassNames":"k-w-1/2 k-d-flex k-align-items-center  k-border-solid k-border-black k-text-white k-text-center"}}'></LiveDemo>

### Screen

Use the `k-h-screen` utility to make the element expand to 100% of the viewport height.

<LiveDemo data='{"links":[],"demo":"utils/sizing/height/screen","codePreviewSettings":{"ignoreClassNames":"k-w-1/2 k-d-flex k-align-items-center  k-border-solid k-border-black k-text-white k-text-center"}}'></LiveDemo>

### Minimum

Use the `k-h-min-{height}` utility to set a minimum height to an element.

<LiveDemo data='{"links":[],"demo":"utils/sizing/height/minimum","codePreviewSettings":{"ignoreClassNames":"k-w-1/2 k-d-flex k-align-items-center  k-border-solid k-border-black k-text-white k-text-center"},"height":270}'></LiveDemo>

### Maximum

Use the `k-h-max-{height}` utility to set a maximum height to an element.

<LiveDemo data='{"links":[],"demo":"utils/sizing/height/maximum","codePreviewSettings":{"ignoreClassNames":"k-w-1/2 k-d-flex k-align-items-center  k-border-solid k-border-black k-text-white k-text-center"},"height":270}'></LiveDemo>