The height
CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.
/* Keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /* Global values */ height: inherit; height: initial; height: unset;
The min-height
and max-height
properties override height
.
Initial value | auto |
---|---|
Applies to | all elements but non-replaced inline elements, table columns, and column groups |
Inherited | no |
Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto . A percentage height on the root element is relative to the initial containing block. |
Media | visual |
Computed value | a percentage or auto or the absolute length |
Animation type | a length, percentage or calc(); |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<length>
- See
<length>
for possible units. <percentage>
- Specified as a
<percentage>
of containing block's height. border-box
- If present, the preceding
<length>
or<percentage>
is applied to the element's border box. content-box
- If present, the preceding
<length>
or<percentage>
is applied to the element's content box. auto
- The browser will calculate and select a height for the specified element.
- fill
- Use the
fill-available
inline size orfill-available
block size, as appropriate to the writing mode. max-content
- The intrinsic preferred height.
min-content
- The intrinsic minimum height.
available
- The containing block height minus vertical margin, border and padding.
fit-content
- The larger of:
- the intrinsic minimum height
- the smaller of the intrinsic preferred height and the available height
Formal syntax
[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
Example
HTML
<div id="red"> <span>I'm 50 pixels tall.</span> </div> <div id="green"> <span>I'm 25 pixels tall.</span> </div> <div id="parent"> <div id="child"> <span>I'm half the height of my parent.</span> </div> </div>
CSS
div { width: 250px; margin-bottom: 5px; border: 3px solid #999999; } #red { height: 50px; } #green { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'height' in that specification. |
Working Draft | Added the max-content , min-content , available , fit-content , border-box , content-box keywords. |
CSS Transitions The definition of 'height' in that specification. |
Working Draft | Lists height as animatable. |
CSS Level 2 (Revision 1) The definition of 'height' in that specification. |
Recommendation | Adds support for the <length> values and precises on which element it applies to. |
CSS Level 1 The definition of 'height' in that specification. |
Recommendation | Initial definition |
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification. |
Working Draft | Adds new sizing keywords for width and height. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 |
fill , fit-content , min-content , max-content |
46.0 | ? |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 | (Yes) |
fill , fit-content , min-content , max-content |
? | 46.0 | ? | 46.0 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
colleenmcginnis,
erikadoyle,
jpmedley,
mrstork,
teoli,
Sebastianz,
fscholz,
Manojkr,
wbamberg,
Tungsten314,
ebiven,
Martyr2,
Caagr98,
yisi,
kscarfone,
NidalR,
Sheppy,
FredB,
ethertank,
SeekYeFirstTheWiki,
brianloveswords,
McGurk,
grendel,
Jürgen Jeka,
Mgjbot,
Fredchat,
BijuGC,
Waldo,
Eboyjr14
Last updated by:
colleenmcginnis,