max-height

max-height CSS 속성은 요소의 최대 높이를 설정합니다. max-height는 height 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.

max-height가 height를 재설정하고, min-height가 max-height를 재설정합니다.

구문

/* <length> 값 */
max-height: 3.5em;

/* <percentage> 값 */
max-height: 75%;

/* 키워드 값 */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

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

값

<length>: 고정 길이로 나타낸 최대 높이.
<percentage>: 컨테이닝 블록 높이에 대한 백분율로 나타낸 최대 높이.

키워드 값

none: 최대 높이를 정하지 않음.
max-content: 본질적인 선호 높이.
min-content: 본질적인 최소 높이.
fill-available: 컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)
fit-content: max-content와 동일.

형식 구문

none | (en-US) <length-percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)where 
<length-percentage> = <length> | (en-US) <percentage>

예제

table { max-height: 75%; }

form { max-height: none; }

접근성 참고사항

페이지의 확대 또는 글씨 크기를 키운 후에도 max-height를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.

명세

Specification	Status	Comment
CSS Box Sizing Module Level 3 The definition of 'max-height' in that specification.	Working Draft	Adds the `max-content`, `min-content`, `fit-content`, and `fill-available` keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
CSS Transitions The definition of 'max-height' in that specification.	Working Draft	Defines `max-height` as animatable.
CSS Level 2 (Revision 1) The definition of 'max-height' in that specification.	Recommendation	Initial definition.

초기값	`none`
적용대상	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 percentage value is treated as `none`.
Computed value	the percentage as specified or the absolute length or `none`
Animation type	a length, percentage or calc();

브라우저 호환성

BCD tables only load in the browser