Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

height

Introduction

The height CSS property specifies the height of an element. By default, the property defines the height of the border area. If box-sizing is set to content-box, however, it instead determines the height of the content area.

The min-height and max-height properties override height.

Examples

css-apisrc/height/App.tsx
Preview

Syntax

/* <length> values */
height: 300px;
height: 25em;

/* <percentage> value */
height: 75%;

/* Keyword values */
height: max-content;
height: fit-content;
height: fit-content(20em);
height: auto;

Values

  • auto

    Default value. lynx will calculate and select a height for the specified element.

  • <length>

    <length> defines the height as a distance value.

  • <percentage>

    Defines the height as a percentage of the containing block's height.

  • max-content

    The intrinsic preferred height.

  • fit-content

    fit-content uses the computed size with the available space replaced by the specified argument.

Formal definition

Initial valueauto
Applies toall elements
Inheritedno
Animatableyes
PercentagesThe percentage is calculated with respect to the height of the generated box's containing block

Formal syntax

height = auto | <length-percentage [0,∞]> | max-content | fit-content( <length-percentage [0,∞]> ) <length-percentage> = <length> | <percentage>

Difference with the web

  • By default, the property defines the height of the border area, while Web is content area.
  • min-content is not supported.

Compatibility

Loading

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.