Codestin Search App

CSS height Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The height property controls the used height of an element’s principal box in the CSS layout model. It determines how much vertical space the box should occupy for layout and painting purposes, which affects how subsequent elements are positioned and how the containing block allocates space. For block-level elements the property participates in normal flow and participates in margin collapsing and stacking in ways specific to the element’s display context; for more on those contexts see display.

Because the document flow and inherent sizing rules vary by element type, setting the height of an element can interact with constraints and intrinsic sizes. The effect of a specified height can be limited or expanded by minimum and maximum constraints, so authors commonly combine it with min-height and max-height to create predictable, bounded layouts. In positioned layouts, absolute positioning changes how height is resolved: an absolutely positioned box may instead be sized with respect to its offsets and containing block rather than only its normal-flow height; see position for more on those mechanics.

The way the height value is interpreted relative to padding, borders and content depends on the box-sizing model, so the same numeric height can result in different visual sizes depending on the element’s box model—refer to box-sizing. When content exceeds the available vertical space the element’s behavior (clip, scroll, etc.) is controlled by the overflow handling, which determines whether overflow is visible, hidden, or scrollable; see overflow. For inline-level elements and text-containing boxes, vertical metrics such as the line box and leading influence how specified vertical dimensions translate into actual layout, a topic related to line-height. Overall, height is fundamental for controlling vertical layout but is most predictable when used in combination with the surrounding layout properties and an understanding of how the browser computes used heights.

Definition

Initial value: auto
Applies to: All except for table columns, column groups, and non-replaced inline elements
Inherited: No
Computed value: The percentage or 'auto' (see prose under [percentage]) or the absolute length; 'auto' if the property does not apply
Animatable: Yes
JavaScript syntax: object.style.height

Interactive Demo

Example of the height css property

Syntax

height: <length> | <percentage> | auto

Values

<length>Specifies the width of the content area using a length unit.
<percentage>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
autoThe width depends on the values of other properties. See the sections below.
border-boxIf border-box is used, the length or percentage defined will be applied to the element's border box.
content-boxIf content-box is used, the length or percentage defined will be applied to the element's content-box.
autoIf auto is set for the elements width, the browser will determine the width for the element.
max-contentThe intrinsic preferred width
min-contentThe intrinsic minimum width
availableThe containing block width minus horizontal margin, border, and padding
fit-contentThis will be either the large of the minimum width or the smaller of the preferred width and the available width

Example

HTML

<div class="wrapper">

  <h1>CSS height Property Examples</h1>

  <div class="box px">Fixed height (150px)</div>

  <div class="box percent">Percentage height (50%)</div>

  <div class="box vh">Viewport height (30vh)</div>

  <div class="box auto">Auto height (content-based)</div>

  <div class="box minmax">

    <div class="inner">

      This box uses min-height and max-height. Add enough content to force scrolling inside the box.

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>

      <p>Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>

    </div>

  </div>

</div>

CSS

/* Basic layout */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  height: 100vh; /* needed so percentage heights work */
  box-sizing: border-box;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

/* Generic box styles */
.box {
  background: #f4f6f8;
  border: 1px solid #cfd8dc;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #102a43;
  border-radius: 6px;
}

/* Height examples */
.box.px {
  height: 150px; /* fixed height */
}

.box.percent {
  height: 50%; /* 50% of the body's height (body is 100vh) */
}

.box.vh {
  height: 30vh; /* 30% of the viewport height */
}

.box.auto {
  height: auto; /* height determined by content */
  min-height: 48px;
}

.box.minmax {
  min-height: 60px;
  max-height: 120px;
  overflow: auto; /* allow scrolling if content exceeds max-height */
}

.inner {
  padding: 6px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS height property. Hover over a browser icon to see the version that first introduced support for this CSS property.