---
title: "Height properties"
date: "2017-11-11T12:45:13+00:00"
summary: "Control element heights with precision using min-height, max-height, and fixed height properties. Learn how to set values, understand behavior, and choose appropriate units for responsive web design."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/height-properties"
id: "b3849b19-6326-4823-80f1-0bb86500d4eb"
---

Table of contents will be added

Set the Minimum heigh, Maximum height or Fixed height of an element.

Min height
----------

Set the minimum height of an element.

### Behavior:

*   Min-height prevents the height of the element from being smaller than the value set
*   Min-height does not prevent the element from growing in height if the content within it is larger than the value set
*   Min-height overrides the Height and Max-height properties

### Expected value:

*   Enter a number

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behavior is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent element's height

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Find more information at [https://www.w3schools.com/cssref/pr\_dim\_min-height.asp](https://www.w3schools.com/cssref/pr_dim_min-height.asp)

Max height
----------

Set the maximum height of an element.

### Behavior:

*   Max-height prevents the height of the element from being larger than the value set
*   Max-height does not prevent the element from being in smaller if the content within it is smaller than the value set
*   Max-height overrides the Height property

### Expected value:

*   Enter a number

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent element's height

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Find more information about min-height at [https://www.w3schools.com/cssref/pr\_dim\_max-height.asp](https://www.w3schools.com/cssref/pr_dim_max-height.asp)

Height
------

Set the fixed height of an element.

### Expected value:

*   Enter a number

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels
*   **%** - The value will be applied as a percentage of the parent element's height
*   **vh** - The value will be applied as a percentage of the browser viewport height

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Find more information at [https://www.w3schools.com/cssref/pr\_dim\_height.asp](https://www.w3schools.com/cssref/pr_dim_height.asp)