# CSS: “height”: X negative values are not allowed.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-height-x-negative-values-are-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Negative values for the CSS `height` property are invalid and will be rejected by browsers.

The CSS `height` property accepts only non-negative values. Valid values include `auto`, lengths like `100px` or `10em`, percentages like `50%`, and viewport units like `100vh`. A negative value such as `height: -50px` has no defined meaning for box dimensions and violates the CSS specification.

This error typically appears when `height` is set inline via the `style` attribute, and the W3C validator flags it during HTML validation. Common causes include typos, incorrect calculations in server-side templates, or JavaScript that generates a negative value and writes it into the markup.

If the intent is to hide or collapse an element, use `height: 0` combined with `overflow: hidden` instead. If the intent is to shrink an element relative to some reference, use `calc()` with a positive result, such as `height: calc(100% - 50px)`.

## HTML examples

### Invalid: negative height value

```html
<div style="height: -100px;">
  Content here
</div>
```

### Valid: using zero height or calc()

```html
<!-- Collapse an element -->
<div style="height: 0; overflow: hidden;">
  Hidden content
</div>

<!-- Subtract from a reference value -->
<div style="height: calc(100vh - 100px);">
  Content here
</div>
```