height

개요

height CSS Property는 element의 content area 높이로 지정됐다. content area는 element의 margin, border, padding 안쪽의 높이이다.

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

min-height와 max-height properties 는 height를 보충한다(override).

초기값	`auto`
적용대상	all elements but non-replaced inline elements, table columns, and column groups
상속	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
Animatable	yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword value */
height: auto;

/* <length> values */
height: 120px;
height: 10em;

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

/* Global values */
height: inherit;
height: initial;
height: unset;

Values

<length>

사용가능한 단위 참조 <length>

<percentage>

블록의 높이를 포함하는 <percentage>.

border-box

존재하는 경우, 앞선 <length> 또는 <percentage> element들은 border box가 적용된다.

content-box

존재하는 경우, 앞선 <length> 또는 <percentage> element들은 content box가 적용된다.

auto

브라우저가 지정된 element를 선택하고 높이를 계산한다.

fill

fill-available inline size 또는 fill-available block size 에 사용하며, writing mode에 적절하다.

max-content

본래 갖고 있던 적절한 높이.

min-content

본래 갖고 있던 가장 작은 높이.

available

수직 margin, border, padding height를 뺀 content block 높이.

fit-content

다음 중 보다 큰 :

고유 최소 높이(본래 갖고 있던 가장 작은 높이)
고유 최소 높이보다 작지만, 사용 가능한 높이

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.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	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	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0	(Yes)
`fill`, `fit-content`, `min-content`, `max-content`	?	46.0					46.0