CSS 높이 설정 비율이 적용되지 않으면 어떻게 해야 합니까?

적용되지 않는 이유: 상위 요소의 높이가 결정되지 않아 "height:XX%" 스타일을 효과적으로 사용할 수 없습니다. 해결 방법: 높이 속성을 사용하여 상위 요소의 특정 높이를 설정하면 하위 요소의 높이 설정 비율이 적용될 수 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

div에 대한 height:50% 설정과 같이 블록 수준 요소에 대해 반응형 높이를 설정할 때 효과를 보지 못하는 경우가 많습니다.

그 이유는 백분율 크기가 상위 요소의 너비 및 높이를 기준으로 하기 때문입니다. 예를 들어 가장 바깥쪽 요소에 의해 설정된 백분율은 화면에 해당합니다.

너희가 이해해야 할 점은 너비의 경우 상위 요소가 너비를 결정하지 않고 백분율을 설정할 수 있다는 것입니다.

하지만 높이가 다릅니다.요소의 상위 요소가 높이를 결정하지 않는 경우 높이는 XX%입니다. 스타일을 효과적으로 사용할 수 없습니다! ! !

위 문단을 읽고 body{heigh: 100%}를 추가하려고 했으나 소용이 없었습니다...

잘 생각해 봅시다~~~, body의 부모 요소 높이 설정 아직 다운 안됐나요? ? ? ? ? ? 아니요~~아직 효과가 없습니다

그래서 html 요소의 높이를 설정해야 합니다! ! 또는 *{}

코드는 다음과 같습니다

*{
	margin:0px;
	padding: 0px;
}
html,body{
	margin: 0px;
	background:url(../img/body_bg.jpg) no-repeat 0 0;
	width:100%;
	height:100%;
}
.nav{
	width:100%;
	height:20%;
	border: 1px solid red;
}
.nav>img{
	width:100%;
	height: 100%;
}

에서 높이 백분율을 설정하세요. 프로그래밍 관련 지식을 더 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 높이 설정 비율이 적용되지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!