> 웹 프론트엔드 > CSS 튜토리얼 > \'높이: 100%\'가 레이블 요소에 작동하지 않는 이유는 무엇입니까?

\'높이: 100%\'가 레이블 요소에 작동하지 않는 이유는 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-03 19:14:29
원래의
746명이 탐색했습니다.

Why Doesn't

레이블 요소에 대해 "height: 100%"가 작동하지 않는 문제 해결

"height: 100을 사용하여 레이블 요소의 높이 설정 시도 %;" 원하는 결과가 나오지 않을 수 있습니다. 이를 이해하기 위해 HTML의 높이 계산 개념을 더 자세히 살펴보겠습니다.

레이블을 포함한 요소의 높이는 상위 요소의 높이에 따라 결정됩니다. 제공된 코드에서 라벨은 'field' 클래스가 있는 div 내에 중첩되어 있습니다. "높이: 100%;" 올바르게 작동하려면 상위 div의 "높이"를 명시적으로 설정해야 합니다. 이는 기본적으로 HTML 요소에 고유한 높이가 없기 때문입니다.

예제 코드에서는 "필드" div의 "높이" 속성이 지정되지 않았습니다. 따라서 브라우저에는 레이블 높이 "100%"를 계산하는 참조점이 없습니다. 이 문제를 해결하려면 다음과 같이 "필드" div의 높이를 정의해야 합니다.

<code class="css">.field {
    height: 400px; /* Set the parent div's height */
}</code>
로그인 후 복사

상위 div의 높이가 지정되면 "높이: 100%;" 라벨 요소에 올바르게 적용되어 상위 div 내에서 사용 가능한 전체 높이를 차지하게 됩니다.

위 내용은 \'높이: 100%\'가 레이블 요소에 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿