MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

개요

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
PercentagesThe 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.
Mediavisual
Computed valuea percentage or auto or the absolute length
Animatableyes, 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 orderthe 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.

Browser compatibility

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

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: DeadIntegral
 최종 변경: DeadIntegral,