CSS 높이 속성
예시
두 <div> 요소의 높이를 설정합니다.
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
height
속성은 요소의 높이를 설정합니다 .
요소의 높이는 패딩, 테두리 또는 여백을 포함하지 않습니다!
height: auto;
요소가 콘텐츠가 올바르게 표시될 수 있도록 높이를 자동으로 조정하는 경우 .
가 height
숫자 값(예: 픽셀, (r)em, 백분율)으로 설정된 경우 콘텐츠가 지정된 높이에 맞지 않으면 오버플로됩니다. 컨테이너가 오버플로 콘텐츠를 처리하는 방법은
overflow 속성에 의해 정의됩니다.
참고: min -height 및
max-height 속성은 속성을 재정의합니다
height
.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS 구문
height: auto|length|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
auto | The browser calculates the height. This is default | |
length | Defines the height in px, cm, etc. Read about length units | |
% | Defines the height in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
요소의 높이를 상위 요소 높이의 50%로 설정합니다.
#parent {
height: 100px;
}
#child {
height: 50%;
}
관련 페이지
CSS 튜토리얼: CSS 높이 및 너비
CSS 튜토리얼: CSS 상자 모델
CSS 참조: 너비 속성
HTML DOM 참조: 높이 속성