Que faire si le pourcentage de réglage de la hauteur CSS ne prend pas effet

La raison pour laquelle il ne prend pas effet : La hauteur de son élément parent n'est pas déterminée, donc le style "height:XX%" ne peut pas être utilisé efficacement. Solution : utilisez l'attribut height pour définir une certaine hauteur pour l'élément parent, afin que le pourcentage de réglage de la hauteur de l'élément enfant puisse prendre effet.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Lorsque nous définissons des hauteurs réactives pour les éléments au niveau du bloc, comme le réglage height:50% pour les divs, nous ne parvenons souvent pas à voir l'effet.

La raison est que la taille en pourcentage est relative à la largeur et à la hauteur de son élément parent. Par exemple, le pourcentage défini par l'élément le plus à l'extérieur correspond à l'écran.

Ce que vous devez comprendre, c'est que pour la largeur, son élément parent peut définir le pourcentage sans déterminer la largeur

Mais la hauteur est différente Sil'élément parent d'un élément ne détermine pas la hauteur, la hauteur :XX%. le style ne peut pas être utilisé efficacement. ! !

Après avoir lu le paragraphe ci-dessus, j'ai essayé d'ajouter body{heigh: 100%}, mais cela n'a servi à rien...

Réfléchissons bien~~~, le réglage de la hauteur de l'élément parent de body Êtes-vous déjà à terre ? ? ? ? ? ? Non~~Donc ça n'a toujours aucun effet

Nous devons donc toujours définir la hauteur de l'élément html ! ! Ou définissez le pourcentage de hauteur dans *{}

Le code est le suivant

*{
	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%;
}

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!