'높이: 100%;'를 설정할 때 내 레이블 요소가 전체 높이를 채우지 못하는 이유는 무엇입니까?

백분율 설정 시 라벨 높이 문제

높이를 100%로 설정해도 라벨 요소는 영향을 받지 않습니다. 그 이유는 height: 100%; 일반적으로 상위 요소의 높이인 참조점에 의존합니다.

제공된 코드 조각에서 .field 라벨의 높이는 100%입니다. 속성이지만 상위 요소인 .field가 높이 값을 지정하지 않습니다. 결과적으로 브라우저에는 100%를 계산할 정의된 높이가 없습니다.

이 문제를 해결하려면 .field 상위 요소에 대한 높이 값을 설정하세요. 예를 들어, height: 200px를 사용하여 고정 높이를 할당할 수 있습니다. 또는 height: 50vh;를 사용하여 포함 요소를 기반으로 한 높이 백분율입니다. (여기서 vh는 뷰포트 높이를 나타냄).

수정된 코드:

상위 요소에 대한 높이 컨텍스트를 제공함으로써 레이블의 100% 높이 설정은 다음과 같습니다. 결과적으로 .field 컨테이너 내에서 라벨이 완전히 확장됩니다.

위 내용은 '높이: 100%;'를 설정할 때 내 레이블 요소가 전체 높이를 채우지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!