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

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

height

Summary

Overview table

Syntax

Values

Examples

Notes

Remarks

Related specifications

See also

Related articles

CSS Layout

Box Model

CSS Attributes

Grid Layout

Related pages

Attributions