height CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizingborder-box라면 테두리 영역의 높이를 설정합니다.

min-heightmax-height 속성은 height를 덮어씁니다.

구문

/* 키워드 */
height: auto;

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

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

/* 전역 값 */
height: inherit;
height: initial;
height: unset;

<length>
높이의 절대값.
<percentage>
컨테이닝 블록 높이의 백분율.
border-box 
앞선 <length> 또는 <percentage>가 요소의 보더 박스에 적용.
content-box 
앞선 <length> 또는 <percentage>가 요소의 콘텐츠 박스에 적용.
auto
브라우저가 요소의 너비를 계산하고 선택.
fill
글쓰기 방향에 따라 fill-available 인라인 크기 또는 fill-available 블록 크기를 사용.
max-content 
본질적인 선호 높이.
min-content 
본질적인 최소 높이.
available 
컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.
fit-content 
다음 중 더 큰 값.
  • 본질적인 최소 너비
  • 본질적인 선호 너비와 사용 가능한 너비 중 작은 값

형식 구문

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

예제

HTML

<div id="taller">제 키는 50픽셀입니다.</div>
<div id="shorter">제 키는 25픽셀입니다.</div>
<div id="parent">
  <div id="child">
    제 키는 부모의 절반입니다.
  </div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

결과

접근성 고려사항

페이지를 확대하거나 글꼴 크기를 늘렸을 때 height 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

명세

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.
초기값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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
heightChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
max-contentChrome Full support 46Edge No support NoFirefox Full support 66
Full support 66
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 44Safari Full support YesWebView Android Full support 46Chrome Android Full support 46Firefox Android Full support 66
Full support 66
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 43Safari iOS Full support YesSamsung Internet Android Full support 5.0
min-contentChrome Full support 46Edge No support NoFirefox Full support 66
Full support 66
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 44Safari Full support YesWebView Android Full support 46Chrome Android Full support 46Firefox Android Full support 66
Full support 66
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 43Safari iOS Full support YesSamsung Internet Android Full support 5.0
stretchChrome Full support 28
Alternate Name
Full support 28
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
Edge No support NoFirefox No support NoIE No support NoOpera Full support 15
Alternate Name
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
Safari ? WebView Android Full support 4.4
Alternate Name
Full support 4.4
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
Chrome Android Full support 28
Alternate Name
Full support 28
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
Firefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
fit-contentChrome Full support 46Edge No support NoFirefox No support NoIE No support NoOpera Full support 33Safari Full support YesWebView Android Full support 46Chrome Android Full support 46Firefox Android No support NoOpera Android ? Safari iOS Full support YesSamsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, DeadIntegral
최종 변경자: mdnwebdocs-bot,