이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

개요

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
Animation typea length, percentage or calc();
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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,