This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

height

Summary

Sets the height of an element. The content area of the element height does not include the padding, border, and margin of the element.

Overview table

Initial value
auto
Applies to
All elements
Inherited
No
Media
visual
Computed value
percentage or absolute height
Animatable
No

CSS Object Model Property
:

Syntax

  • height: auto
  • height: available
  • height: border-box
  • height: content-box
  • height: fit-content
  • height: height
  • height: max-content
  • height: min-content
  • height: percentage

Values

auto
If auto is set for the elements height, the browser will determine the height for the element.
height
Will take a number that is immediately followed by a length unit such as px, em, in, etc.
percentage
Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly. Negative values are not allowed.
border-box
If border-box is used, the height or percentage defined will be applied to the element’s border box.
content-box
If content-box is used, the height or percentage defined will be applied to the element’s content-box.
max-content
The intrinsic preferred height
min-content
The intrinsic minimum height
available
The containing block height minus horizontal margin, border, and padding
fit-content
This will be either the large of the minimum height or the smaller of the preferred height and the available height

Examples

/* Height of div equal to 100% of the bounding element */
div { height: 100% }

/* Height of h1 equal to 20em */
h1 { height: 20em }

/* Height set to auto */
section { height: auto }

/* Height of image set to 100px */
img { height: 100px }

Example using new values that are part of the CSS Basic Box Model that is currently in working draft.

<style>
/**
 * Height values of the CSS Box Model working draft
 */

div {
    box-sizing: border-box;
    border: 1px solid #444;
    margin: 5px;
    width: 250px;
}

p {
    background: #000;
    color: lightgrey;
    padding: 5px;
    font-family: Arial, sans-serif;
}

p.height200 {
    /* vendor prefix needed */
    height: 200px;
    background: blue;
    color: orange;
}

p.height50 {
    /* vendor prefix needed */
    height: 50px;
    background: red;
}

p.height50solved {
    /* vendor prefix needed */
    height: 50px;
    background: green;
    overflow: hidden;
}
</style>
<div>
<p>This is the content inside of the parent div. Height is not set, so the height is defaulting to auto.</p>
</div>

<div>
<p class="height200">This is the content inside of the parent div. It's height is set to 200px</p>
</div>

<!-- You can solve the issue below by setting the overflow property -->
<div>
<p class="height50">This is the content inside of the parent div. The content extends beyond the bounding element and extends into elements below, interupting the flow.</p>
</div>

<!-- Solved by setting the overflow property to hidden -->
<div>
<p class="height50solved">This is the content inside of the parent div. The content extends beyond the bounding element and extends into elements below, interupting the flow.</p>
</div>

View live example

Notes

Remarks

If you specify the height property of an img object but not the width property, the width is proportional to the height according to the dimensions of the image source file. To perform operations on the numeric value of this property, use pixelHeight or posHeight.

Related specifications

CSS Basic Box Model
Working Draft
CSS Level 2
Recommendation
CSS Level 1
Recommendation

See also

Related articles

CSS Layout

Box Model

CSS Attributes

Grid Layout

Related pages

  • CSSStyleDeclarationCSSStyleDeclaration
  • currentStylecurrentStyle
  • runtimeStyleruntimeStyle
  • stylestyle
  • Conceptual
  • Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
  • Other Resources
  • CSS Enhancements in Internet Explorer 6

Attributions