height CSS 서술자(descriptor)는 뷰포트의 min-heightmax-height 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.

뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.

Related at-rule@viewport
초기값as each of the properties of the shorthand:
Percentagesas each of the properties of the shorthand:
  • min-height: 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 percentage value is treated as 0.
  • max-height: 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 percentage value is treated as none.
Mediaas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
  • min-height: the percentage as specified or the absolute length
  • max-height: the percentage as specified or the absolute length or none
Canonical orderorder of appearance in the formal grammar of the values

구문

/* 한 값 */
height: auto;
height: 320px;
height: 15em;

/* 두 값 */
height: 320px 200px;

auto
다른 CSS 설명자의 값에서 계산된 사용값(used value).
<length>
음이 아닌 절대 또는 상대 길이.
<percentage>
가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.

형식 구문

<viewport-length>{1,2}

where
<viewport-length> = auto | <length-percentage>

where
<length-percentage> = <length> | <percentage>

예제

@viewport {
  height: 500px;
}

명세

명세 상태 설명
CSS Device Adaptation
The definition of '"height" descriptor' in that specification.
Working Draft 초기 정의

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
height descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

문서 태그 및 공헌자

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