28172 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai le height de plusieurs div qui ne s'applique pas .

j'ai testé avec du vh et différente valeur , mais rien ne marche.

S'avez vous pourquoi ?

<div id="emc2">
			<div id="emainmain">
				<nav id="enav">
					<ul>  
						<li>
							<a href="# ">lien1</a>
						</li> 
						<li>
							<a href="#">lien2</a>
						</li>
						<li>
							<a href="#">lien3</a>
						</li>
						<li>
							<a href="#">lien4</a>
						</li>
						<li>
							<a href="#">lien5</a>
						</li>
					</ul>
				</nav>
				<div id="emc3">
					<p>s</p>
				</div>
				<div id="emc4">
					<p>f</p>
				</div>
				<div id="emc5">
					<p>u</p>
				</div>
				<div id="emc6">
					<p>d</p>
				</div>
				<div id="emc7">
					<p>dk</p>
				</div>
				<div id="emc8">
					<p>t</p>
				</div>				
			</div>
		</div>





#emc2{
	margin-top: 8%;
	height: 100vh;
	width: 97%;
}

#emainmain{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: scroll;
	width: 98%;
	height: 80vh;
	margin-left: 1%;
	margin-top: 1%;
}


#enav{
	display: flex;
	justify-content: center;
	background-color: green;
	width: 100%;
	height: 10%;	
	margin-bottom: 5%;
}

#enav ul{
	display: flex;
	justify-content: space-around;
	justify-content: center;
}
#enav  li{
	list-style: none;
	float: left;
	padding-left: 100%;
	margin-right: 30%;
}

			/*The emc*/
#emc3{
	background-color: orange;
	width: 100%;
	height: 60%;
	margin-bottom: 15%;
}
#emc4{
	background-color: yellow;
	width: 100%;
	margin-bottom: 15%;

}
#emc5{
	background-color: orange;
	width: 100%;
	height: 60%;
	margin-bottom: 15%;

}
#emc6{
	background-color: yellow;
	width: 100%;
	height: 60%;
	margin-bottom: 15%;

}
#emc7{
	background-color: orange;
	width: 100%;
	height: 60%;
	margin-bottom: 15%;
}
#emc8{
	background-color: yellow;
	width: 100%;
	height: 60%;
}
	

Modifié par freeeeezi (09 Nov 2020 - 13:42)
Alors, j'ai rajouter du texte dedans et la div s'agrandit en fonction de la taille du texte et de la hauteur que je lui donne au maximum . Je comprend pas trop pourquoi mais au mois, ça marche, Je serais quand même ravi si l'on m'explique les raisons du problème que j'avais . Merci !
Modérateur
Bonjour,
freeeeezi a écrit :
Je serais quand même ravi si l'on m'explique les raisons du problème que j'avais . Merci !

C'est à cause du display:flex qui était sur le parent des <div>. Il est en quelques sortes "prioritaire" dans pas mal de circonstances.

Amicalement,
Modifié par parsimonhi (09 Nov 2020 - 14:51)
Meilleure solution